固定数量的小部件显示在屏幕上

Question

我尝试开发一个用户界面，我有一个类别列表，每个类别都有一些选项。

这个问题非常愚蠢，但在扩展特定小部件时无法找到正确的解决方案。小部件的数量正在改变，这是在左侧，数字小部件在右侧增加我想要固定数字小部件，如文件所示加载。小部件展开时的示例低于

我的代码如下所示

<div class="widget-body  col-lg-12 no-padding">
<div class="row">
    <div class="col-lg-6" ng-repeat="cat in category track by $index"  >
        <section class="widget " data-widgster-collapsed="true" style="margin-bottom:5px;margin-top:15px; "> 
            <header class="ui-sortable-handle" style=" border-top: 3px solid orange;">
                <h5>
                    <span class="fw-semi-bold">{{cat.Name}}</span>
                    <div class="widget-controls" >
                        <a data-widgster="expand" title="" ng-click="show(cat.Id)" href="#" style="display: none;" data-original-title="Expand">
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </a> 
                        <a ng-click="hide(cat.Id)"  data-widgster="collapse" title="" href="#" data-original-title="Collapse">
                          <i class="glyphicon glyphicon-chevron-down"></i>
                        </a> 
                    </div>
                </h5>
            </header>
            <div class="widget-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="col-lg-6 checkbox" ng-repeat="opt in cat.option">
                            <input id="{{cat.Id}}_{{opt.id}}" type="checkbox" ng-checked="{{opt.value}}" ng-model="opt.value"> 
                            <label for="{{cat.Id}}_{{opt.id}}">{{opt.name}}</label>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
</div>

所以，在展开时，我想要左边有5个小部件，右边有5个小部件，那里的位置必须固定。