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;
}

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

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

.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(options) {
		var heights = {};
		$(this).each(function() {
			var j = $(this).offset().top.toString().replace('.', '-');
			console.log(j);
			$(this).outerHeight('auto');
			if (typeof heights[j] == 'undefined') heights[j] = 0;
			heights[j] = Math.max(heights[j], $(this).outerHeight());
			$(this).addClass('equalHeightsGroup_' + j);
			$('.equalHeightsGroup_' + j).outerHeight(heights[j]);
		});
	}
});


/* DOM READY FUNCTIONS
    -------------------------------------------------------------- */
$(document).ready(function() {

    /* EQUALIZE COLUMNS
    -------------------------------------------------------------- */
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize'); // don't write code twice when you don't need to- trigger the event you just bound to instead

})