Как сделать ввод занимает все свободное пространство в строке

Question

Я пытаюсь создать управление тегами. Я использую плагин jQuery tagmanager с twitter-typeahead. Я использую псевдо-элемент ввода и вставляю в него прозрачный ввод.

<div class="tag-collector"> <!-- This div looks like input --> 
    <input class="tag-getter" id="gc-input" type="text" name="grantCurrent"> 
    <!-- this input is transparent --> 
</div> 

И когда пользователь отправляет что-то плагин tagmanager, создайте интервал, отображающий отправленный тег.

<div class="tag-collector"> 
    <!-- this is my submittet tag --> 
    <span class="tm-tag" id="MbkVa_1"> 
     <span>Submited Info</span> 
     <a href="#" class="tm-tag-remove" id="MbkVa_Remover_1" tagidtoremove="1">x</a>   
    </span> 

    <!-- this is twitter-typeahead wrapper --> 
    <span class="twitter-typeahead"> 
     <!-- a bunch of HTML where contains my REAL INPUT--> 
    </span> 
    <input type="hidden" name="hidden-telephone" value="Angola"> <!-- input to collect values --> 
</div> 

И теперь главная проблема. Я хочу .twitter-typeahead с моим вводом всегда заполняет все свободное пространство в строке.

1) Если я использую width: 100% и введите хотя бы один тег DIV, растягивающий по высоте. Теперь в первой строке находится интервал тегов и во второй строке (вся строка), заполненной вводом.

2) Если я использую постоянную ширину и введите теги, общая ширина которых больше, чем ширина моего ввода, чем вход перемещается вниз в следующую строку. И теперь у меня есть одна заполненная строка и одна пустая строка, заполненная на ~ 50% с помощью ввода.

Помогите мне мастерам CSS!

UPD: Fiddle

Answer 1

вы можете использовать float:left и overflow: hidden;, как показано здесь:

http://jsfiddle.net/d2YTf/1/