ブートストラップドロップダウンと他のドロップダウンをグリッドレイアウトに揃える方法は？

以下のスクリーンショットのようなレイアウトに一致するフィルターを作成しようとしています。

これまでのところ、以下のスクリーンショットのようなものを実現することができます。

問題は、最初のスクリーンショットに示されているように、スペースの観点からアイテムを均等に分散できないことです。また、テーブルを使用してこの種のレイアウトを作成するのは良い方法ですか？

このレイアウトを理解して作成するのを手伝ってください。

以下は私のコードです

<div class="panel panel-default">
    <div class="panel-heading" style="padding: 20px;">
        <div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
        <div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
    </div>
    <div class="panel-body">
        <table width="100%">
            <tr>
                <td colspan="1">
                    <div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
                        <button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
                            {{dropDownTitle}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu scroll-menu nav" role="menu">
                            <li ng-repeat="agent in agentListData">
                                <a role="menuitem" href="#" ng-click="">{{agent}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
                        <button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
                            {{dropDownAllTaskStatusTitle}}
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu scroll-menu nav" role="menu">
                            <li ng-repeat="task in taskStatusListData">
                                <a role="menuitem" href="#" ng-click="">{{task.title}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div ng-show="!loadinga">
                        <input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
                    </div>
                </td>
                <td colspan="1" style="padding-right: 200px"></td>
            </tr>
            <tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
                <td colspan="4">
                    <hr/>
                </td>
            </tr>
            <tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
                <td align="left" colspan="1">
                    <div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
                        <input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
                        <label for="excludeMinutesStep">Exclude tasks running &lt; </label>
                        <input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
                    </div>
                </td>
                <td align="left" colspan="1">
                    <div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
                        <input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
                        <label for="datalabels">Show Labels</label>
                    </div>
                </td>
                <td colspan="1" style="padding-right: 200px"></td>
                <td colspan="1" style="padding-right: 200px"></td>
            </tr>
            <tr style="padding:2px">
                <td colspan="4">
                    <hr/>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
                    <a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
                </td>
            </tr>
        </table>
    </div>
</div>

css

.text-label {
    color: #aab2bd;
    font: 8pt;
}
.text-label-emphasize {
    color: #575F64;
}