JSFiddle - React, Tailwind, and code Playground

by rwaldin

HTML

<div class="con equalizedHeight">
    <div class="col">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div><!-- 
 --><div class="col keylined">
        <div class="menuItem">asdadSdasdadSdasdadSdasdadSd</div>
    </div><!--
 --><div class="col">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div><!--
 --><div class="col keylined">
        <div class="menuItem">asdadSd sdsr adwe</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd sdsr</div>
        <div class="menuItem">asdadSd sdsr adwe</div>
        <div class="menuItem">asdadSd</div>
    </div>
</div>

<div class="con equalizedHeight">
    <div class="col">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div><!--
 --><div class="col">
        <div class="menuItem">asdadSd</div>
    </div><!--
 --><div class="col keylined">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div><!--
 --><div class="col keylined">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div>
</div>

CSS

.con {
    margin-bottom: 50px; 
    border: 1px solid black;
    width: 436px;
}

.col {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    width: 100px;
    padding: 0 4px;
    margin: 12px 0;
    border-left: 1px solid #eee;
    word-wrap: break-word;  /* or overflow: hidden; ? */
}

.keylined {
    border-left-color: blue;
}

.menuItem {
    margin: 2px 0;
    cursor: pointer;
    padding: 2px;
}

.menuItem:hover {
    background-color: #eee;
}

JavaScript

function equalizeHeights(equalizedHeightContainer) {
    var height = 0;
    dojo.query('>*', equalizedHeightContainer).forEach(function(elem) {
        height = Math.max(height, dojo.contentBox(elem).h);
    }).style({minHeight: height + 'px'});
}

dojo.addOnLoad(function() {
    dojo.query('.equalizedHeight.con ').forEach(equalizeHeights);
});