Динамическое выравнивание div в Angular

Question

Я создаю диаграммы динамически, и у меня возникают некоторые проблемы с выравниванием диаграммы.

Это мой текущий код:

<div class="row mt-5">
      <ng-container *ngFor="let meta of dashboardContrato.metaStatusMaterial; let posicao = index">
        <div class="form-group col-md-4 mb-1 p-0">
          <div class="card border-0">
            <div class="card-body" style="max-height: 80px; height: 80px">
              <h6 style="text-align: center"> {{ meta.descricao }} </h6>
            </div>
            <div class="card-body pb-0">
              <canvas [id]="'chart' + posicao"></canvas>
            </div>
            <div class="card-body p-0 pt-2">
              <h5 style="text-align: center">{{ meta.mediaStatus + '%'}}</h5>
              <h6 *ngIf="meta.metaStatus !== null" style="text-align: center"> Meta {{ meta.comparacaoStatus === 'I'
                ? '< ' : '> '}} {{ meta.metaStatus + '%' }}</h6>
              <h6 *ngIf="meta.metaStatus === null" style="text-align: center"> Sem meta </h6>
            </div>
          </div>
        </div>
      </ng-container>
    </div>

печать экрана свысота

Притн экрана без высоты

Я использую max-height и height, чтобы установить статическую высоту, она заставляет диаграммы правильно выравниваться,но когда описание слишком короткое, оставшееся пространство становится очень большим, выравнивание диаграмм снизу решит проблему, но я не мог понять, как это сделать.