Trouble with Nested Resizables

http://forum.jquery.com/topic/trouble-with-nested-resizables

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<div id="idDivTop" class="ui-widget ui-widget-content">
    Outer resizable        
    <div id="idInnerOne" class="ui-widget ui-widget-content"> Inner resizable 1 </div>
    <div id="idInnerTwo" class="ui-widget ui-widget-content"> Inner resizable 2 </div>
</div>

CSS

#idDivTop { height: 300px; width: 300px; }
#idInnerOne, #idInnerTwo { height: 100px; width: 200px; }

JavaScript

$("div").resizable();
$("div").resizable("destroy");
$("#idInnerOne, #idInnerTwo").resizable();