JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div style="max-height:500px;height:500px;border-color:blue;display:table;" id="main">
    <div class="container">sdgd</div>
    <div class="fieldsPanel">
        <div class="divider"></div>sfkjahsdfklshfglksdhfgklazshdgkhsflkjhgs</div>
</div>http://jsfiddle.net/dlinx/kd9j5gef/#update

CSS

.container {
    height:100px;
    position:relative;
    display:table-row;
}
.fieldsPanel {
    display:table-row;
}
div {
    border:1px solid #F00;
    width:100%;
    overflow: auto;
    box-sizing:border-box;
}
.divider {
    width:100%;
    display: block;
    cursor:row-resize;
    height:3px;
    border:0px;
    background-color:#8a8a8a;
}

JavaScript

var i = 0;
var dragging = false;
$('.divider').mousedown(function (e) {
    e.preventDefault();
    dragging = true;
    var main = $('#main');
    var ghostbar = $('.divider')

    $(window).mousemove(function (e) {
        if (e.which != 1) $(document).trigger("mouseup")
        if(e.pageY<100 || e.pageY>400)return;
        ghostbar.css("top", e.pageY + 2);
        console.log(e.which)
        $('.container').css("height", e.pageY + 2);

    });
});

$(document).mouseup(function (e) {
    if (dragging) {
        $(window).unbind('mousemove');
        dragging = false;
    }
});