JSFiddle - React, Tailwind, and code Playground

by norsewulf

HTML

<header>
    header 'n' stuff
</header>
<br clear="all">
<div id="main">

    <div class="left equalize">        
    <p>it doesn't matter how big the height of this element is.  </p>
    </div>
    <div class="mid equalize">
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam.  </p>
    </div>
    <div class="right equalize">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
    </div>
<br clear="all">
</div>

<footer>
    footer
</footer>

CSS

#main{
margin-bottom: 1.5em;
}

#main:after {
    clear: both;
    content: "";
    display: table;
}

.left {
    float: left;
    margin-right: 2.85714%;
    width: 48.5714%;
      position:relative;
    background:green;
  min-height:5px;
}

.left p,
.mid p{
  position:absolute;
  top:0;
  right:0;
}

.mid {
    float: right;
    margin-right: 0;
    width: 48.5714%;
    position:relative;
    background:blue;
  min-height:5px;
}

.right {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 red;
    border-radius: 4px 4px 50% 50% / 4px 4px 10% 10%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
    float: right;
    margin-right: 0;
    padding: 20px;
    width: 100%;
}

JavaScript

$.fn.extend({
	equalHeights: function(){
		var top=0;
		var row=[];
		var classname=('equalHeights'+Math.random()).replace('.','');
		$(this).each(function(){
			var thistop=$(this).offset().top;
			if (thistop>top) {
				$('.'+classname).removeClass(classname); 
				top=thistop;
			}
			$(this).addClass(classname);
			$(this).height('auto');
			var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
			$('.'+classname).height(h);
		}).removeClass(classname); 
	}	   
});

$(function(){
  $(window).resize(function(){
    $('.equalize').equalHeights();
  }).trigger('resize');
});