JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="content">
<div id="topDiv">
    This is top div element.
</div>
<div id="splitter">    
</div>
<div id="bottomDiv">
    This is bottom div element.
</div>
</div>

CSS

#content {
    border: 2px solid black;
    widht: 300px;
    height: 416px;
    margin: 4px;
}

#topDiv {
    widht: 100%px;
    height: 200px;    
    border: 2px solid red;    
}

#splitter {
 height: 6px;
 width: 100%;
 background: #eee;
 border-top: 1px solid #9CBDFF;
 border-bottom: 1px solid #9CBDFF;
 cursor: n-resize;
}

#bottomDiv {
    widht: 100%px;
    height: 200px;    
    border: 2px solid blue;        
}

JavaScript

$(function() {
var startPos = 0;
$("#splitter").draggable({
    axis:'y',
    start:function(e, ui){
        startPos = e.pageY;
    },
    drag:function(e, ui){
        topHeight = $("#splitter").css("top");
        topHeight = parseInt(topHeight.replace('px',''));
        $("#topDiv").css( {height:topHeight+"px"} );
        height = ($(window).height() - ($("#topDiv").height())) - 22;
        $("#bottomDiv").css({ 'height':height+'px' });
    },
    stop:function(e, ui){
        dragBarTop = $("#topDiv").height() + 6;
        $("#splitter").css( { top:dragBarTop+"px" } );
    }
});  

});