JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<div class="flex-row steps">
  <div class="step">
    <h3>Lorem ipsum dolor sit amet</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper gravida augue, quis lacinia libero faucibus sit amet.</p>
  </div>
  <div class="step">
    <h3>consectetur adipiscing elit.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper gravida augue, quis lacinia libero faucibus sit amet.</p>
  </div>
  <div class="step">
    <h3>Pellentesque ullamcorper gravida augue</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper gravida augue, quis lacinia libero faucibus sit amet.</p>
  </div>
</div>

CSS

.flex-row {
  display: flex;
}

.step {
  width: 33%;
}

JavaScript

$.fn.equalHeights = function(offset) {
  var min_height = 0;
  $(this).each(function() {
    min_height = Math.max($(this).height(), min_height);
    if (offset) {
      min_height = min_height - offset;
    }
  });

  if ($(window).width() > 991) {
    $(this).each(function() {
      $(this).css({
        'min-height': min_height
      });
    });
  } else {
    $(this).each(function() {
      $(this).removeAttr("style")
    });
  }
};

$('.step h3').equalHeights(22);

$(window).on("resize", function() {
  $('.step h3').equalHeights();
});