How to make an input occupy all available space in row

Question

I try to design tag managing control. I use jQuery plugin tagmanager with twitter-typeahead. I'm using pseudo-input element and put into it transparent input.

<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>

And when user submiting something tagmanager plugin create span that display submited tag.

<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>

And now the main trouble. I want to .twitter-typeahead with my input always fills all free space in the row.

1) If I use width: 100% and enter at least one tag DIV stretching in height. Now on the first row is tag span and at second row (all row) filled by input.

2) If I use constant width and enter tags which total width is more than my input's width than input moves down to the next row. And now I have one half-filled row and one empty row wich is filled at ~50% with input.

Help me CSS masters!

UPD : Fiddle

Answer 1

you can use float:left and overflow: hidden; as seen here:

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