Dynamic progressibar

Question

Good morning, I need to unite two progressbar, or at least leave the two closer together, but in any way I try I can not, I will make a comparison:

  <mat-card fxFlex="100" fxFlex.gt-md="66.66">

        <div *ngFor="let item of dashboardItems$.scheduleOverview; let index=index">
          <div fxFlex.gt-lg="100">
            <label>{{item.name}} </label>
          </div>
          <div fxFlex.gt-lg="100">
            <div class="container" fxFlex.gt-md="66.66">
              <div class="progress" fxFlex.gt-md="100" fxLayoutGap="5px">
                <div class="progress-bar progress-bar-success" role="progressbar"
                  [style.width]="(item.expectedDuration/100)*100 + '%'" [attr.aria-valuenow]="item.expectedDuration"
                  aria-valuemin="0" aria-valuemax="100">
                  {{item.expectedDuration}}%</div>
              </div>
              <div class="progress" fxFlex.gt-md="100" fxLayoutGap="5px">
                <div class="progress-bar progress-bar-secondary" role="progressbar"
                  [style.width]="(item.expectedDuration/100)*100 + '%'" [attr.aria-valuenow]="item.expectedDuration"
                  aria-valuemin="0" aria-valuemax="100">
                  {{item.expectedDuration}}%</div>
              </div>
            </div>
            <div style="align-items: center; text-align: center;" fxFlex.gt-md="15">
              {{item.expectedDuration}}
            </div>
            <div style="align-items: center; text-align: center;" fxFlex.gt-md="15">
              {{item.updatedDuration}}
            </div>
          </div>
        </div>
      </mat-card>

This way up, stand next to each other, and I need you to stay down.

I tried something like:

      <div class="progress" fxFlex.gt-md="100" fxLayoutGap="5px">
                <div class="progress-bar progress-bar-success" role="progressbar"
                  [style.width]="(item.expectedDuration/100)*100 + '%'" [attr.aria-valuenow]="item.expectedDuration"
                  aria-valuemin="0" aria-valuemax="100">
                  {{item.expectedDuration}}%</div>
                      <div class="progress-bar progress-bar-secondary" role="progressbar"
                  [style.width]="(item.expectedDuration/100)*100 + '%'" [attr.aria-valuenow]="item.expectedDuration"
                  aria-valuemin="0" aria-valuemax="100">
                  {{item.expectedDuration}}%</div>
              </div>

But it also didn’t work as expected. Any idea how to organize this in bootstrap ?