JSFiddle - React, Tailwind, and code Playground
HTML
<div class="block">
<div class="block-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="block-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt turpis vel libero aliquet tristique. Quisque quam lacus, fringilla rutrum iaculis ultricies, scelerisque laoreet mauris. Fusce a dapibus odio.</p>
</div>
<div class="block-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt turpis vel libero aliquet tristique. Quisque quam lacus.</p>
</div>
</div>
CSS
.block { width:100%; }
.block-content {
background:#CCC;
float:left;
margin-left:3%;
width:27%; }
.block-content p { background:red; }
JavaScript
function setTheHeight() {
if( $('.block .block-content').length ) {
//Get value of highest element
var maxHeight = Math.max.apply(Math, $('.block .block-content').map (
function() {
return $(this).height();
}
));
console.log(maxHeight);
$('.block .block-content').height(maxHeight);
}
}
setTheHeight();
$(window).resize(function() {
setTheHeight();
});