jquery textarea resize resizing parent div

what i try to do is, when my textarea is resized, the containing div is also resized. Myproblem is not about setting the size of the containing div, its more the catching and enhancing (?) of the resize event of the textarea.

I am still a Beginner on this and i read everything i could find. But, most of things i tried killed my layout and did nothing.

So, what i need is a push to the corrrect direction.

I am using Jquery 1.6 and Jquery UI 1.8.11.

This is the code:

<div class="ui-layout-north" style="border-bottom-style: dotted;
border-bottom-color: silver;">
           <form id="add_ticket"开发者_如何转开发 method="post" action="">
           <div id="tdescr" class="overlabel-wrapper">
                   <label class="overlabel overlabel-apply" for="descr" style="text-indent: 0px; cursor: text;">Enter the description</label>
                   <textarea id="text" class="required" tabindex="1" maxlength="1024" name="text" style="width:99%;"></textarea>
           </div>
           <div class="buttons">
                   <input type="button" name="Test_neo4j" value="Test Neo4j REST API" onclick="get_root()">
           </div>
        </form>           
</div>

This is the js:

$( "#text" ).resizable({ alsoResize: '.ui-layout-north' });

In jsFiddle it seems to work properly. But on my page it crashes the layout. textarea border and resize handle is not longer visible, Button over the textarea......

The Layoutcrash only happens when the js code is added.

Any suggestions??

Thorsten