JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PageDiv">
    <div id="foo">
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
    </div>
    <div id="bar">
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
    </div>
    <div id="baz">
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
        <p>Here is some text</p>
    </div>
    <p id="control"><button id="fix">Fix it up!</button></p>
</div>

CSS

#foo, #bar, #baz {
    float: left;
    width: 30%;
    margin-right: 2%;
    background-color: #ffc;
}

#fix, #control {
    clear: both;
    margin-top: 14px;
    font-size: 11px;
}

JavaScript

var boxes = $$('#foo, #bar, #baz');
var height = boxes.map(function (elm) {
    return elm.getHeight();
}).max();
// uncomment below to make it run at load
/*
    boxes.invoke('setStyle', {
        'height': height + 'px'
    });
*/
// just for demo purposes
$('fix').observe('click', function () {
    boxes.invoke('setStyle', {
        'height': height + 'px'
    });
});