当前一个元素的宽度动态增长时，如何将 html 元素向右推？

Question

我有两个textbox根据输入大小动态增长的输入。其间有一小段文字。问题是，当textbox宽度增加时，它会与旁边的文本重叠。

我正在寻找一种HTML/CSS样式，可以让我随着宽度的增加将文本推到右侧textbox。

任何帮助是极大的赞赏。谢谢

添加我的一些代码。

.dynamic-push {
  float: left;
}

<div class="row dynamic-push">
  <div class="two columns dynamic-push ">
    <input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" /> at
    <input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
  </div>
</div>

有淘汰元素，我使用jqueryautosize.input.js插件来动态增加输入文本框的宽度。

现在，两个输入文本框之间的“at”随着第一个文本框的textbox增长而被重叠。希望您能找出这里出了什么问题。如果您需要任何其他CSS代码，我也会分享这些代码

Answer 1

为什么不简单地将它们漂浮在容器内：

ONLINE DEMO

（演示包含放大文本框的动画）

HTML：

<div>
    <input><div>Box 1</div<div>Box 2</div
</div>

CSS：

div > input,
div > div {
    float:left;
}

（当然，将 div 与适当的类交换）。

更新

感谢OP提供更多代码。

但是，正如您在这个修改后的小提琴中看到的：
http://jsfiddle.net/AbdiasSoftware/LxByQ/2/

问题不在于 DOM 级别，因为盒子按预期推动和移动。

问题很可能出在处理字符等的 autosizeInput 函数中。延迟可能是由它的处理方式引起的。由于未显示其代码，因此很难找到确切的原因，但这是您首先要查看的地方。