Динамическое изменение размера текстового поля

Question

Есть часть веб-приложения, которое я пишу, что является особой болью, чтобы выглядеть действительно красиво и аккуратно, как я этого хочу. У меня есть кнопка с фиксированной шириной рядом с формой, содержащей текст, текстовое поле ввода и кнопку отправки. Я хочу, чтобы ширина окна ввода изменялась в зависимости от ширины экрана, но я не знаю, как это сделать, если вы не упадете на следующую строку.

Вот скрипку проблемы: http://jsfiddle.net/Yt3V2/

HTML:

<div class="wrapper"> 
    <button type="button" class="new_button">Create New</button> 
    <form name="input" action="" method="post"> 
    Search: 
    <input type="text" class="search_input"></input> 
    <input type="submit" value="Submit"></input> 
    </form> 
</div> 

CSS:

.new_button 
{ 
    float: left; 
    min-width: 120px; 
} 

.search_input 
{ 
    width: /* What could go here? */; 
} 

Много предложений, включенных сделать таблицу из CSS, который получает я довольно близко, но текстовое поле все равно будет отключено: http://jsfiddle.net/G9pDw/

Есть ли способ получить текстовое поле ввода для динамического изменения размера и по-прежнему соответствовать тому, где я хочу?

Answer 1

Согласно этому question: попробуйте изменить:

<input type="text" class="search_input"></input> 

в

<input type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></input> 

JSFiddle

** Обновлено *************** **********

New JSfiddle