All SLDS-BOX have an equal height using Flexbox in LWC

 

HTML

<ul class="list slds-p-around_large" >

<li class="list-item slds-box slds-box_xx-small slds-p-horizontal_large">

<div class="list-content">

<img src={xyz1} >

<div>

Header1

</div>

<p>

SubHeading 1

</p>

<lightning-button label="View" onclick={handleView} class="slds-float_left">

</lightning-button>

</div>

</li>

<li class="list-item slds-box slds-box_xx-small slds-p-horizontal_large">

<div class="list-content">

<img src={xyz2} >

<div>

Header2

</div>

<p>

SubHeading 2

SubHeading 2

SubHeading 2

SubHeading 2

</p>

<lightning-button label="View" onclick={handleView} class="slds-float_left">

</lightning-button>

</div>

</li>

</ul>

CSS

.list {

display: flex;

flex-wrap: wrap;

}

@media all and (min-width: 30em) {

.list-item {

width: 30%;

}

}

.list-item {

display: flex;

padding: 0.5em;

margin: 12px 18px 12px 18px;

}

.list-content {

display: flex;

flex-direction: column;

padding: 1em;

width: 100%;

}

.list-content p {

flex: 1 0 auto;

text-align: justify;

}

.list-content img {

width: 400px;

height: 300px

}