JSFiddle - React, Tailwind, and code Playground

by wizzud

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id='info'>container width : <span id='width'></span></div>
<div id='container'>
    <div id='A'><div></div></div>
    <div id='B'><div></div></div>
    <div id='Z'></div>
</div>

CSS

#container {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    position: relative;
}
#A, #B, #Z {
    position: absolute;
    top: 0;
    height: 100%;
}
#A {
   left: 0;
    width: 39%;
    background-color: #ccffcc;
}
#B {
    right: 0;
    width: 59%;
    background-color: #ccccff;
}
#Z {
    left: 39%;
    width: 2%;
    background-color: #cc0000;
    cursor: move;
}
#A div, #B div {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
}
#info {
    text-align: center;
    line-height: 2em;
}

JavaScript

$(function(){
    var A = parseInt($('#A').width(), 10),
        B = parseInt($('#B').width(), 10),
        Z = parseInt($('#Z').width(), 10),
        minw = parseInt((A + B + Z) * 10 / 100, 10),
        offset = $('#container').offset(),
        splitter = function(event, ui){
            var aw = parseInt(ui.position.left),
                bw = A + B - aw;
            //set widths and information...
            $('#A').css({width : aw}).children().text(aw);
            $('#B').css({width : bw}).children().text(bw);
        };
    $('#Z').draggable({
        axis : 'x',
        containment : [
            offset.left + minw,
            offset.top,
            offset.left + A + B - minw,
            offset.top + $('#container').height()
            ],
        drag : splitter
    });
    //information...
    $('#width').text(A + B + Z);
    $('#A div').text(A);
    $('#B div').text(B);
});