JSFiddle - React, Tailwind, and code Playground

by roelvd

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="wrapper" class="table">

    <div class="row">
        <div class="column" style="width: 20%">
            <div class="container empty"></div>
        </div>
        <div class="column" style="width: 50%">
            <div class="container">
                <div class="element"><p>Text</p></div>
                <div class="element"><p>And more text. An complete paragraph actually.</p><p>And another one!</p></div>
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
        <div class="column" style="width: 30%">
            <div class="container">
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
    </div>

</div>

CSS

* {
    margin: 0;
    padding: 0;
}

p {
    padding: 3px;
}

#wrapper {
    margin: 30px;
    width: 600px;
    outline: 2px solid grey;
}

.table {
    display: table;
    height: 100%;    
}

.row {
    display: table-row;
    height: 100%;
}

.row .column:not(:last-child) {
    border-right: 1px solid grey;
}

.row .column:not(:last-child) .container {
    padding-right: 5px;
}

.column {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

.container {
    height: 100%;
    margin: 0;
}

.container.empty {
    background-color: yellow;
}

JavaScript

$(function() {
    var nextWidth;
    $('.row .column:not(:last-child)').resizable({
        handles: 'e',
        start: function(e, ui) {
            var $col = $(ui.element);
            var $next = $col.next();
            var $cols = $col.closest('.row').find('.column');
            $.each($cols, function(key, el) {
                $(el).css('width', $(el).width());
            });
            nextWidth = $next.outerWidth();
        },
        resize: function(e, ui) {
            var $element = $(ui.element);
            var $next = $element.next();

            // Snappping
            var myWidth = $element.width() / $element.parent().width()* 100;
            var myWidthInPixels = myWidth * $element.parent().width() / 100;

            ui.size.width = myWidthInPixels;

            var delta = ui.size.width - ui.originalSize.width;
            $next.css('width', (nextWidth - delta) + 'px');
            $element.css('width', myWidthInPixels + 'px');
        },
        stop: function(e, ui) {
            var $col = $(ui.element);
            var $row = $col.closest('.row');
            var $cols = $row.find('.column');

            var accumulated = 0;
            $.each($cols, function(index, el) {
                var percentage;
                if (index == $cols.length - 1) {
                    percentage = 100 - accumulated;
                } else {
                    percentage = Math.ceil($(el).width() / $row.width() * 100);
                    accumulated += percentage;
                }
                $(el).css('width', percentage + '%');
            });
        }
    });
});