Css 将div拟合到宽度

我有这样一个结构：

<div class="col-md-7">
  <div style="float:left; padding-right:10px">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left">
    <input type="text">
  </div>
</div>

{{text}}

---

父div的宽度是固定的，但是

{{text}}

的长度是可变的。我希望文本和输入都适合同一行。如何使用css使输入宽度动态？

添加

宽度：100%h5

和

input

元素上的code>应该让它们填充它们的父元素：

h5 { width: 100%; }
input { width: 100%; }

但是，听起来您的问题在于这些父div本身，而不是

h5

或

input

元素

通过添加

display:inline块，可以并排对齐这些div到他们的样式，然后应用宽度（大约50%）：


{{text}}
link运行良好。谢谢。这只是为了使包装div具有相同的宽度，并确保它们并排堆叠以填充（精确地）其父级宽度的100%。50%的宽度可以设置为您想要或需要的任何宽度。。。只要两个组合元素（加上任何填充）的宽度不超过它们的完整父元素宽度。如果是这样，那么第二个子div将跳到下一行。这不是假设父级宽度应该是相同的宽度吗？我不想让他们这样。我想让它们适合自己的宽度。我猜这就是内联块要做的，但那不起作用。
<div class="col-md-7">
  <div style="float:left; display:inline-block; width:50%;">
    <h5>{{text}}</h5>
  </div>
  <div style="float:left; display:inline-block; width:50%;">
    <input type="text">
  </div>
</div>