JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatibus illum officiis possimus provident sapiente similique ipsa impedit facilis architecto suscipit et deleniti autem enim veritatis harum ipsum culpa at.</p>
</div>
<div class="row">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At voluptatem tempore voluptatibus sit corporis id porro? Modi ratione aspernatur dolore praesentium vel deserunt quae totam ducimus molestiae repellat quaerat quia.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatibus illum officiis possimus provident sapiente similique ipsa impedit facilis architecto suscipit et deleniti autem enim veritatis harum ipsum culpa at.</p>
</div>
<div class="row">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatibus illum officiis possimus provident sapiente similique ipsa impedit facilis architecto suscipit et deleniti autem enim veritatis harum ipsum culpa at.</p>
</div>
<div class="row">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At voluptatem tempore voluptatibus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatibus illum officiis possimus provident sapiente similique ipsa impedit facilis architecto suscipit et deleniti autem enim veritatis harum ipsum culpa at.</p>
</div>
CSS
.row {
float: left;
width: 50%;
margin-bottom: 50px;
}
h3 {
margin: 0;
}
p {
margin: 0;
}
JavaScript
(function(cls) {
if(typeof cls == 'string' && arguments.length) {
var headers = document.querySelectorAll(cls);
var arr = [];
for(var i = 0; i < headers.length; i++) {
arr.push( headers[i].offsetHeight );
}
var max = Math.max.apply(null, arr);
for(var i = 0; i < headers.length; i++) {
if(headers[i].offsetHeight != max) {
headers[i].style.marginBottom = max - headers[i].clientHeight + 'px';
}
}
}
})('.row h3');