JSFiddle - React, Tailwind, and code Playground

by gnel

HTML

<script src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
<div class="item-list row-1">
    <h2>Row 1</H2>
<ul>
    <li><img src="http://lorempixel.com/output/nature-h-c-153-256-3.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-153-113-5.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-h-c-153-221-1.jpg"></li>    
</ul>

</div>

<div class="item-list row-2">
<h2>Row 2</H2>
<ul>
    <li><img src="http://lorempixel.com/output/nature-q-c-200-95-2.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-152-1.jpg"></li>
    <li><img src="http://lorempixel.com/output/nature-q-c-169-96-3.jpg"></li>     
</ul>
</div>

CSS

li {
 float: left;  
 margin-right: 5px;
 background-color: lightblue;    
}

.item-list {
  clear: both;
  float: none;
}

JavaScript

$(".item-list ul").each(function() {
    $(this).find('li').equalHeights(50,400);
});