'Angular - Table column items indented depending on column-item

i have little issue with a part of a code. I didn't write this code myself but i am supposed to fix some issues. Down below you can find the code that causes this issue. The issue itself is that the right column bars are moved depending on how long the letters in the first column are, see image below. Does anyone have a solution for this, i am fairly new to this kind of work. enter image description here

<td class="progress-bar-average">
            <div fxLayout="row" fxLayoutGap="1rem" *ngFor="let averateRating of ideaAverageRatings; let i = index"
                 style="align-items: center; margin-right: 50px;">
              <div><b>{{getAlphaCategory(i + 1)}}</b></div>
              <p-progressBar value="{{averateRating.averageRating}}" fxFlex="50" [showValue]="false"
                             styleClass="bar">
              </p-progressBar>
              <div>{{averateRating.averageRating}}%</div>
            </div>
          </td>
cssangularhtml-table


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions