Bootstrap 3面板标题右拉按钮用于创建高级搜索

Question

我想使用bootstrap面板来创建高级搜索设计。

喜欢这张图片：

我的HTML是这样的：

<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
    <div class="panel-heading clearfix">
       <h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>

        <div class="btn-group pull-right">
            <div class="row form-inline">
                <div class="form-group col-sm-12">
                    <label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
                            <span class="input-group-btn">
                                <button title="Click for search" type="button" class="btn btn-info btn-sm">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </span>
                        </div>

                    </div>
                    <div class="col-sm-1">
                        <a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
                            <i class="glyphicon glyphicon-chevron-down"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="panel-body panel-collapse collapse">
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="Nume" class="control-label">Nume:</label>
                    <input type="text" name="Nume" id="Nume" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="Prenume" class="control-label">Prenume:</label>
                    <input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="Nume" class="control-label">Nume aa:</label>
                    <input type="text" name="Nume" id="Nume" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="Prenume" class="control-label">Prenume aa:</label>
                    <input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="Nume" class="control-label">Nume bb:</label>
                    <input type="text" name="Nume" id="Nume" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="Prenume" class="control-label">Prenume bb:</label>
                    <input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="Nume" class="control-label">Nume cc:</label>
                    <input type="text" name="Nume" id="Nume" class="form-control input-sm">
                </div>
                <div class="form-group">
                    <label for="Prenume" class="control-label">Prenume cc:</label>
                    <input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer">
        <strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
    </div>
</div>

像这样：http://jsfiddle.net/nkS2e/4/

我如何才能更好地做到这一点，因为调整大小不是好事而不是最好的方法。