JSFiddle - React, Tailwind, and code Playground

HTML

<button>Size spans</button>
<hr>
<ul>
</ul>

CSS

html, body {
  background: #333;
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  float: left;
  list-style-type: none;
}

span {
  border: 1px solid gray;
  background: white;
  padding: 0.3em;
  display: inline-block;
}

JavaScript

function sizeSpans() {
  var spans= $('ul span'),
      tallest,
      top= $(spans[0]).offset().top;

  spans.css('height', '');
  tallest= $(spans[0]).height();
  
  spans.each(function(idx1) {
    if($(this).offset().top === top) {
      tallest= Math.max(tallest, $(this).height());
      spans.each(function(idx2) {
        if(idx2 <= idx1 && 
           $(this).offset().top === top
          ) {
          $(this).css('height', tallest);
        }
      });
    }
    else {
      tallest= $(this).height(),
      top= $(this).offset().top;
    }
  });
} //sizeSpans

$(window).resize(sizeSpans);

function randImages() {
  var imgs= '',
      i;

  for(i = 0 ; i < 20 ; i++) {
    imgs+= '<li>'+
           ' <span>'+
           '  <img src="http://placehold.it/'+
              (Math.floor(Math.random() * 5) + 3)*25+'x'+
              (Math.floor(Math.random() * 3) + 3)*25+'"/>'+
           ' </span>'+
           '</li>';
  }
  $('ul').append(imgs);
} //randImages

randImages();
$('button').click(sizeSpans);