Javascript 如何使输入占用行中的所有可用空间

我尝试设计标签管理控件。我使用jQuery插件。我使用伪输入元素并将其放入透明输入

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

提交的信息

现在主要的问题是。我想。推特输入的内容总是会填满行中的所有可用空间

1） 如果我使用宽度：100%并输入至少一个高度延伸的标记DIV。现在第一行是标记span，第二行（所有行）由输入填充

2） 如果使用恒定宽度并输入总宽度大于输入宽度的标记，则输入将下移到下一行。现在我有一个半填充行和一个空行，其中填充了大约50%的输入

帮帮我

---

UPD:

您可以使用

浮动：左
和
溢出：隐藏如图所示：

 
请考虑为将来的答案提供一个小提琴；新跨距向下移动，但输入始终位于容器的右侧和顶部。我需要输入是容器中的最后一个元素，并且输入占据了所有的空闲空间，直到行结束。这正是它所做的，还是我误解了什么？你说的“跨度向下移动”是什么意思啊？我想我知道你的意思。是否希望输入占用容器未占用的其余空间？如果你把它放在容器里，把它的宽度限制在180px，那就行不通了。这个容器需要100%的容量。如果你想在你的标签周围有一个额外的边框，就像你在小提琴上展示的那样，你需要在你的标签周围有一个额外的div（那一个也是浮动的）。其余的保持不变。