How to Create Jquery Two Div Resize Horizontally

Question

I want to create two divs re-sizable horizontally but when first one hight increases according to that second height must decrease and also both have a common parent whose height & width is 100%; So when we increase or decrease the height of both divs they must keep in parent div's height; here is my code please provide jquery codes and css codes for it; i am using jquery-1.11.2.js and jquery-ui.min.js.

<div id="parent" style="height:100%;width:100%> <div id="div1"> My Data </div> <div id="div2"> My Data </div> </div>

Answer 1

you create that using jquery UI resizable() and listen to that resize event

Go to : Working Demo jsfiddle

<div id="parent">
   <div id="div1"> My Data1 </div> 
    <div id="div2"> My Data2</div> 
</div>

jquery 1.9.1 & jquery UI

$("#div1").resizable();
    $('#div1').resize(function(){
       $('#div2').width($("#parent").width()-$("#div1").width()); 
    });

updated:listen for browser window resize

$(window).resize(function(){
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 
});