JSFiddle - React, Tailwind, and code Playground

by rwaldin

HTML

<div id="test" class="con equalizedHeight maxRight">
    <div class="col">
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
        <div class="menuItem">asdadSd</div>
    </div><!-- hide significant whitespace between inline-ish elems
 --><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>

CSS

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

.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'});
}

function maxRight(elem, maxRight) {
    var pos = dojo.marginBox(elem);
    pos.l = Math.min(pos.l, maxRight-pos.w);
    dojo.marginBox(elem, pos);
}

dojo.addOnLoad(function() {
    dojo.query('.equalizedHeight.con').forEach(equalizeHeights);
    maxRight(dojo.byId('test'), 640); 
});