css - ブロックレベルの入力を備えた応答性の高いセグメント化されたドロップダウングループ

Question

ブートストラップ フレームワークを使用して、レスポンシブ ホテル検索ページを開発しています。下の画像に示すように、ブロック レベル入力のセグメント化されたドロップダウン グループが必要です。

ここで、入力は全幅になり、左にフロートしてアクションドロップダウンになります。テキスト「アクション」は動的であり、ドロップダウンからのユーザーの選択に従って変化します。そのため、ドロップダウンの幅が広がる可能性があります。

入力テキストは、ドロップダウンのすぐ左から開始し、全幅に収まるようにする必要があります。

私はこの静的で管理しましたが、レスポンシブを行うときやドロップダウンテキストが増加したときに、幅に直面する多くの問題があります。

誰もこれを実装する方法を知っていますか?

助けてくれてありがとう..

編集：ここに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>