Skalowalny input

Witam was,

Potrzebuję zrobić skalowalny input, w kierunku horyzontalnym. Próbowałem przez jquery: http://jqueryui.com/demos/resizable/#default . Jednak mam taki problem, że przy ustawieniu tekstu za i przed inputem, lądują one do innej linii:

<style>
	#container { width: 300px; height: 300px;  }
	#resizable { height: 100px; width: 150px; }
	#resizable, #container { padding: 0.5em; }
</style>
 <script>
	$(function() {
		$( "#resizable" ).resizable({
			containment: "#container"
		});
	});
</script>
...
	
<div id="container" class="ui-widget-content">
	tekst<input id="resizable"  class="ui-widget-content"/>dalszy tekst
</div>

Jak to obejść?