jQuery : Resizing the layouts

I want re-sizable feature like jsFiddle : link. If i explain in my own words there are four layouts

[1. HTML, 2. javascript, 3. CSS & 4.Result] and we can re-size the layout inwards & outwards. I have been tried to make resizable using jQuery but failed to do like jsFiddle.

    my example:  CSS 
 #parent { position:relative; width 100%; height:100%;}
    #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
    #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }

    <开发者_开发问答;div id = "parent"> 
      <div class="resize" id = "left"> </div>
      <div class="resize" id = "right"> </div>
    </div>
    js: $(function() { $('.resize').resizable(    { handlers: 'n,e,s,w' }    ); 
    });

in example, there are two layout left & right, are equals in size. when i resize any div then other div should change it's size too but it doesn't make any difference in size while jsFiddle does.

Add the jQuery css in your code and it will be working fine. add this line:

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">

**Editing**:: Use this one: It will work for left div. try this :)

 /*my example:  CSS */
 #parent { position:relative; width 100%; height:100%;}
 #left {position:absolute;left:0; width:48%;height:100%; border:1px dashed; }
 #right {position:absolute;right:0; width:48%;height:100%; border:1px dashed; }

/*my example:  JS */
jQuery(function() { 

    jQuery('#left').resizable({  
                                resize: function(event, ui) {
                                            var leftWidth = ( 100 * parseFloat($('#left').css('width')) /   parseFloat($('#left').parent().css('width')) );
                                            var rigthWidth = 100 - leftWidth - 4;//4 is ur distance between two divs
                                            jQuery('#right').css('width', rigthWidth + '%');
                                        }
                            });
});

<div id = "parent"> 
  <div class="resize" id = "left"> </div>
  <div class="resize" id = "right"> </div>
</div>