Fixed number of widget display on the screen - html

Question

Everyone I am try to develop a UI in which I have a list of category each category has some options.
The issue is pretty silly but not able find a correct solution for it when I expand a particular widget. the count of widget is changing which is on the left side and number widget is increased on the right side I want to fixed number widgets as shown on document is loaded. Example when widget expands is below
My code is like this given below
<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>
So, on expand I want 5 widgets on left and 5 on right and there position must be fixed.