JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x150">
</div>
<div class="name">Lorum Ipsum Lorum Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum</div>
</div>
</li>
<li>
<div class="tile">
<div class="img">
<img src="http://placehold.it/100x50">
</div>
<div class="name">Lorum Ipsum Lorum</div>
</div>
</li>
</ul>
CSS
ul {
margin:0;
padding:0;
width:600px;
margin:0 auto;
border:#999 solid 1px;
border-bottom:none;
border-right:none;
overflow:hidden;
}
li {
float:left;
list-style:none;
width:25%;
padding:0;
margin:0;
box-sizing:border-box;
border-right:#999 solid 1px;
border-bottom:#999 solid 1px;
text-align:center;
padding:5px;
}
JavaScript
equalHeight($('.tile'));
function equalHeight(group) {
tallest = 0;
group.each(function () {
thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}