How to set equal height in css when content differs - html

Question

I want to display cards in the same height even when the content(pattern-name) differs.I'm getting the content from DB.
Here is my html code
<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>
Here is my CSS for wrapper and profile-card
.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;
}
Please help me in doing that. Thanks in advance

Answer 1

as of now I did not get the reply from you that you want these 2 items side by side or up and down, so just seeing your code, I am assuming that you need it side by side.
so in your case just use display: flex; and flex-child will take the same height which will be side by side, to make last-child anchor below use flex-wrap: wrap and it will go down as first 2 items will take 50% width each.
I have given both div's background color just for demo purpose so that you can see these are taking equal height.
.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>
if need something else, feel free to share