JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<h1>Equal Height Columns with jQuery</h1>
   <p>This is an example of equal height columns using a single short jQuery function. View the page source or <a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/">refer to the original CSS Newbie article</a> to see how the function works.</p>
<div class="wrap">
   <div class="wrap-item column equal-height" id="col1">
      <p>This three-column design features three columns with significantly varying quantities of content.</p>
   </div>
   <div class="wrap-item column equal-height" id="col2">
      <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
      <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
   </div>
   <div class="wrap-item column equal-height" id="col3">
      <p>And I think a single class is an addition we can all get behind.</p>
   </div>
</div>

CSS

body {
      font: small/1.3em Arial, Helvetica, sans-serif;
      background-color: white; }
.wrap {
      width: 100%;
      overflow: hidden;
}

.wrap-item {
    width: 25%;
    float: left;
}


.column {
      padding: 10px; }
   #col1 {
      margin-right: 10px;
      background-color: #E2DDC4; }
   #col2 {
      margin-right: 10px;
      background-color: #6B99F6; }
   #col3 {
      background-color: #E87C5E; }

JavaScript

function equalHeight(item) {
  var maxHeight = 0;
  $(item).each(function() {
    var height = $(this).height();
    if (height > maxHeight) {
      maxHeight = height;
    };
  });
  $(item).height(maxHeight);
}
$(document).ready(function() {
  equalHeight('.equal-height');
});  

//function equalHeight() {
//   var maxHeight = 0;
//   $(".equal-height").height("auto").each(function(){ 
//       maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
//   }).height(maxHeight);
//}
//equalHeight();

//equalHeight: function(sel) {
//    var h = 0;
//    $(sel).each(function() {
//    h = $(this).height() > h ? $(this).height() : h;
//    });
//    $(sel).height(h);
//}


// reset height on resize of the window:
$(window).resize(function() { 
    $(".equal-height").css('height', 'auto');
    equalHeight('.equal-height');
});