javascript - Resizable div puts textbox on new line? -

i have code here allows resize div , textbox stays @ 100%.

however textbox goes onto new line - how can keep label , textbox on same line? resizing div around label reduce textbox size?

<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>     <div style="display:table-cell"><label>test&nbsp;</label>    </div>         <input type='text' style='width:100%;' id='inputbox'/>  </div>  $("div").resizable({     handles: "w, sw, ne, nw, se" }); 

working example here:

http://jsfiddle.net/xpuuj/1/

thanks!

here want http://jsfiddle.net/xdhhm/

your code had minor positioning problems , unwanted div.

html:

<div class="container">     <lable>text</lable>     <input type="text" /> </div> 

css:

.container {     width:300px;     border:#000 dashed 1px;     display:table-cell;     white-space:nowrap;     padding:10px 50px 10px 10px; } input {     width:100%;     margin-left:10px; } 

jquery

$(".container").resizable({     handles: "w, sw, ne, nw, se" });