具有块级输入的响应分段下拉组

Question

我正在使用bootstrap框架来开发响应式酒店搜索页面。我需要一个带有块级输入的分段下拉组，如下图所示。

这里，输入将是全宽，Floated左侧为Action下拉列表。 文本“操作”是动态的，将根据用户从下拉列表中选择进行更改。所以下拉的宽度可能会增加。

输入文本应该只从左侧开始到下拉列表，并且也适合全宽。

我使用此静态管理，但在执行响应时以及下拉文本增加时，我遇到了很多问题。

有没有人知道如何实现这个？

高级感谢您的帮助..

编辑：这是一个Js小提琴：http://jsfiddle.net/surjithctly/mP8ab/

HTML

<form class="bs-docs-example">
            <div class="input-prepend">
              <div class="btn-group" style="
    z-index: 1;
">
                <button class="btn" tabindex="-1">Action</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              <input type="text" class="input-block-level">
            </div>

          </form>