Html 内联响应表单元素

我有一个文本输入元素和一个提交输入元素，我需要内联和响应。问题是，我无法找到一种方法，在不改变按钮位置的情况下，使文本输入元素保持流畅。任何帮助都将不胜感激

这是我正在使用的html结构

<div class="search-call-to-action">
    <form action="#">
        <input type="text" name="search" placeholder="Search charities by keyword or name...">
        <input class="btn btn-primary btn-large" type="submit" name="submit" value="Search">
    </form>
</div>

这是我试图实现的一个屏幕截图。文本输入需要流畅。

---

您可以使用媒体查询来实现这一点。然后，您应该为每个解决方案创建查询。例如：

@media (min-width: 320px){

div
{
    //some propererties in ems
}

---

我已经提供了一个JSFIDLE，并提供了一个关于如何实现这一点的工作演示。它使用溢出属性。演示

responsive是什么意思？您已经发布了HTML，CSS在哪里？@ExplosionPills文本输入需要流畅，以便在视口大小更改时缩小。这个小表单周围的div位于bootstrap.container内部，因此父div将变小。将宽度设置为百分比似乎不起作用，因为它会改变按钮的位置，而按钮不能是流体。

<form action="search.php" method="get">
    <input type="submit" name="search" value="Go" style="float: right" />
    <div style="overflow: hidden; padding-right: .5em;">
        <input type="text" name="term" style="width: 100%;" />
   </div>
</form>