JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<div id="div1">Hello</div>
<div id = "handle" ></div>
            <div id="div2">Hi</div>

CSS

#handle {
height: 5px;
display: block;
overflow: hidden;
position: relative;
background: #FAFAFA url(http://jsfiddle.net/img/handle-h.png) 50% 3px no-repeat;
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
cursor: row-resize;
}

#div1 {
 border: 4px solid black;   
}


#div2 {
 border: 2px solid red;   
}

JavaScript

$(function () {
       
    $('#handle').draggable({containment: "parent", stop: function(){
            
            $('#div1').css('height', ($('#handle').offset().top - 5)+'px');   
     $('#div2').css('top', ($('#handle').offset().top + 5)+'px');   
        $('#handle').css('top',$('#handle').offset().top +'px');
        
    }});
       

});