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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </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 {
    background: green;
}

.left {
    width:30%;
    float:left;
    background:green;
}

.mid {
    width:40%;
    height: 100%;
    float:left;
    position:relative;
    background:blue;
}

.right {
    width:30%;
    float:left;
    background:red;
}

JavaScript

/* EQUALIZE COLUMNS
-------------------------------------------------------------- */

// these are (ruh-roh) globals. You could wrap in an
// immediately-Invoked Function Expression (IIFE) if you wanted to...
var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array();

function setConformingHeight(el, newHeight) {
    // set the height to something new, but remember the original height in case things change
    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.outerHeight()) : (el.data("originalHeight")));
    el.outerHeight(newHeight);
}

function getOriginalHeight(el) {
    // if the height has changed, send the originalHeight
    return (el.data("originalHeight") == undefined) ? (el.outerHeight()) : (el.data("originalHeight"));
}

function columnConform() {

    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
    $('.equalize').each(function() {

        // "caching"
        var $el = $(this);

        var topPosition = $el.position().top;

        if (currentRowStart != topPosition) {

            // we just came to a new row.  Set all the heights on the completed row
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

            // set the variables for the new row
            rowDivs.length = 0; // empty the array
            currentRowStart = topPosition;
            currentTallest = getOriginalHeight($el);
            rowDivs.push($el);

        } else {

            // another div on the current row.  Add it to the list and check if it's taller
            rowDivs.push($el);
            currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

        }
        // do the last row
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

    });

}




// Equalize on window...