Как установить равную высоту в css, если содержимое отличается

Question

Я хочу отображать карточки одинаковой высоты, даже если содержимое (pattern-name) отличается. Я получаю содержимое из БД. Вот мой html код

<div class="wrapper" *ngFor="let row of Pattern,I">
   <div class="profile-card">
      <div class="profile-card__unit-description">
         <fa-icon 
          size="3x" 
          [icon]="faBrain" 
          class="icon"></fa-icon>
      </div>
      <div class="profile-card__unit-name">{{row.Pattern_Name}}</div> //This pattern name I'm getting it from DB.
      <a class="fancy-button bg-gradient1" *ngIf="arr[row.Pattern_Id] == 1" onclick="return false">
        <span (click)="onselect(row)">
          <i size="2x" class="fa fa-ticket" ></i>Start
        </span>
      </a>
  </div>  
</div>

Вот мой CSS для обертки и карты профиля

.wrapper {
    display: inline-block;
    margin: 0 50px;
    padding-top: 100px;
    padding-bottom: 80px;
}

.wrapper:focus {
   outline: 0;
}

.profile-card {
    background: white;
    width: 300px;
    display: inline-block;
    margin: auto;
    border-radius: 19px;
    position: relative;
    text-align: center;
    box-shadow: -1px 15px 30px -12px black;
    height:inherit;
}

.profile-card__unit-name {
    font-size: 22px;
    color: black;
    margin-bottom: 10px;
    margin-top:0px;
    margin-left:10px;
    margin-right:15px;
    height:inherit;
}

.profile-card__unit-description {
    padding: 20px;
    color:#F9C118;
}

Пожалуйста помоги мне в этом. Заранее спасибо

Answer 1

На данный момент я не получил от вас ответа о том, что вы хотите, чтобы эти 2 элемента располагались рядом или вверх и вниз, поэтому, просто просматривая ваш код, я предполагаю, что он вам нужен рядом.

, поэтому в вашем случае просто используйте display: flex;, а flex-child будет иметь ту же высоту, которая будет располагаться рядом, чтобы привязка последнего ребенка ниже использовалась flex-wrap: wrap, и она будет go вниз как первые 2 элемента будут занимать 50% ширины каждый.

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

.wrapper {
    display: inline-block;
    margin: 0 50px;
    padding-top: 100px;
    padding-bottom: 80px;
}

* {
  box-sizing: border-box;
}

.wrapper:focus {
   outline: 0;
}

.profile-card {
    background: white;
    width: 300px;
    display: inline-block;
    margin: auto;
    border-radius: 19px;
    position: relative;
    text-align: center;
    box-shadow: -1px 15px 30px -12px black;
    height:inherit;
    display:flex;
    flex-wrap: wrap;
}

.profile-card__unit-name {
    font-size: 22px;
    width: 50%;
    color: black;
    margin-top:0px;
    padding-top: 20px;
background: green;
}

.profile-card__unit-description {
    padding: 20px;
    width: 50%;
    color:#F9C118;
    background: red;
}

.fancy-button {
  width: 100%;
  display: block;
}

<div class="wrapper" *ngFor="let row of Pattern,I">
   <div class="profile-card">
      <div class="profile-card__unit-description">
      <p>dummy data for demo onlydummy data for demo onlydummy data for demo onlydummy data for demo onlydummy</p>
         <fa-icon 
          size="3x" 
          [icon]="faBrain" 
          class="icon"></fa-icon>
      </div>
      <div class="profile-card__unit-name">row Pattern_Name</div> 
      <a class="fancy-button bg-gradient1">
        <span (click)="onselect(row)">
          <i size="2x" class="fa fa-ticket" ></i>Start
        </span>
      </a>
  </div>  
</div>

если нужно что-то еще, не стесняйтесь поделиться