Multy resizable panel

by dfsq

HTML

<div id="container">
    <div id="one">
        <div class="ltop">
            <img class="video" src="http://lorempixel.com/250/150/city/1" alt="">
        </div>
        <div class="lbot">
            <img class="video" src="http://lorempixel.com/250/150/city/2" alt="">
        </div>
    </div>
    <div id="two">
        <img class="video" src="http://lorempixel.com/250/300/city/3" alt="">
    </div>
</div>

CSS

#container {
    background: #DDD;
    padding: 4px;
    border: 1px #AAA solid;
    width: 500px;
    box-sizing: border-box;
}
#container:after {
    clear: both;
    content:'';
    width: 100%;
    display: table;
}
#one, #two {
    height: 300px;
    float: left;
    width: 50%;
    box-sizing: border-box;
}
#one {
    background: coral;
}
#two {
    background: #e4cab2;
}
#two .video {
    width: 100%;
    height: 100%;
}
#one > div {
    box-sizing: border-box;
    height: 50%;
    width: 100%;
}
#one > div .video {
    width: 100%;
    height: 100%;
}
#one .ltop {
    background: olive;
}

.ui-resizable-handle {
    background-color: rgba(255, 255, 255, .8);
}

JavaScript

var $cont = $('#container'),
    contWidth = $cont.width(),
    contHeight = $cont.height(),
    $one = $('#one'),
    $two = $('#two'),
    $ltop = $one.find('.ltop'),
    $lbot = $one.find('.lbot');

$ltop.resizable({
    handles: 'se',
    minWidth: '100',
    maxWidth: '400',
    resize: function() {
        var width = $(this).width(),
            height = $(this).height(),
            remSpaceH = contWidth - width,
            remSpaceV = contHeight - height;
        
        $one.width(width);
        $two.width(remSpaceH - ($two.outerWidth() - $two.width()));
        
        $lbot.height(remSpaceV - ($lbot.outerHeight() - $lbot.height()));
    }
});