Как мне выровнять предметы внутри карточки?

Question

Я использую angular, html и css, чтобы создать свой первый побочный проект, и начал использовать flex для выравнивания элементов на моей странице. Основная часть моего приложения - это просто карты с информацией о предстоящих концертах в метро.

Похоже, что Flex работает для выравнивания самих карт, однако у меня возникают проблемы с согласованием выравниваний для элементов внутри каждой карты. Когда я добавляю стили «padding-top: 30%» или «justify-content: flex-end» для элементов внутри карточек, он показывает разные выравнивания на разных карточках, поскольку каждая карточка имеет разную информацию с разной длиной текста, заставляя выравнивания быть различными для карты (скриншот ниже).

Я использую * ngFor для l oop во всех предстоящих шоу и хочу применить один и тот же стиль ко всем картам, чтобы получить единый взгляд на все.

Извините, я знаю, что это немного запутанно из-за комбинации css классов и встроенного стиля, я просто пытаюсь заставить все выглядеть так, как я хочу, прежде чем полностью очистить его.

Любая помощь будет очень признательна.

Скриншот карты

    <div class="container">
      <div *ngFor='let show of showsToDisplay'>
        <h6>{{ show.venue.displayName }}</h6>
        <div class="card card:hover border-secondary mb-8 rounded" style="width: 18rem; height: 36rem; padding-bottom: 25%;">
          <img id="cardImage" [src]="show.uri">
          <div class="card-body">
            <h3>{{ show.performance[0].artist.displayName }}</h3>
            <h5 class="text-secondary" *ngIf="show.performance[1]">{{ show.performance[1].artist.displayName }}</h5>
            <h6 class="text-secondary" *ngIf="show.performance[2]">{{ show.performance[2].artist.displayName }}</h6>
            <br>
            <i class="fa fa-calendar"></i> {{ show.start.date }}
            <p class="card-text"></p>
            <div style="justify-content: flex-end;">
              <a href="#" class="btn btn-secondary">Tickets</a>
            </div>
          </div>
        </div>
      </div>
    </div>

.container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}