JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  <li><h3>Three</h3></li>
  <li><h4>Four</h4></li>
  <li><h5>Five</h5></li>
  <li><h6>Six</h6></li>
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  <li><h3>Three</h3></li>
  <li><h4>Four</h4></li>
  <li><h5>Five</h5></li>
  <li><h6>Six</h6></li>
</ul>

CSS

.eqme li{
  border:1px solid black;
  width:100px;
  float:left;
  margin:0;
  padding:0;
}

JavaScript

$.fn.extend({
	equalHeights: function(){
		var top=0;
		var row=[];
		var classname=('equalHeights'+Math.random()).replace('.','');
		$(this).each(function(){
			if ($(this).is(':visible')){
				var thistop=$(this).offset().top;
				if (thistop>top) {
					$('.'+classname).removeClass(classname); 
					top=thistop;
				}
				$(this).addClass(classname);
				$(this).outerHeight('auto');
				var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
				$('.'+classname).outerHeight(h);
			}
		}).removeClass(classname); 
	}	   
});


$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});