JSFiddle - React, Tailwind, and code Playground

by Matt Jennings

HTML

<div class="container"> 
  <div class='sameHeight'><p>One<br>two<br>three<br>asdfsdaf kjdsafas dffa asdfa ksdfa dsk asd fkadsf jds ak asd f asdf kdas sd af sdfkds jsda diewr uwei asdf ksdfk</p></div>
  <div class='sameHeight'><p>Two</p></div>
  <div class='sameHeight'><p>Three</p></div>       
  <div class='sameHeight'><p>Four</p></div>
</div>

CSS

.container > div {
  border: 1px solid green;
  width: 15%;
  margin-right: 5%;
  float: left;
}

@media (max-width: 768px) {
  .container > div {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

JavaScript

function equalHeight(elem) {
    var windowWidth = $(window).width();
    var tallest = 0;
    elem.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    if(windowWidth > 768) {
        elem.css({
        	minHeight: tallest + 'px'
        });
    }
    else if((windowWidth <= 768)) {
        elem.css({
        	minHeight: 'auto'
        });
     }
 }

equalHeight($('.sameHeight'));
 $(window).on('resize', function() {
    equalHeight($('.sameHeight'));
 });