Alignment changing while iterating over array inside HTML <div> - html

Question

I am iterating over the array and displaying values using HTML component.
Please find my HTML markup below:
<div ng-show="showHistory" class="history-log">
<h5> {{'claim.group.history.label'|translate}}×</h5>
<ul class="history-items">
<li ng-repeat="history in claimGroupingHistories | orderBy : 'lastModifiedAt'">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label>{{'users.history.dateTime'|translate}}:</label>
</div>
<div id="historyActionTime_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.lastModifiedAt | date:'d MMM yyyy HH:mm:ss'}}</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label>{{'users.history.user'|translate}}:</label>
</div>
<div id="historyUser_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.createdBy}}</div>
</div>
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
</div>
<div layout="column">
<div ng-repeat="oldValue in history.oldValueSelected.split(',')" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{oldValue}}</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.newvalueselected'|translate}}:</label>
</div>
<div id="historyNewValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.newValueSelected}} </div>
</div>
</li>
</ul>
</div>
While displaying values, if more values are available then, the alignment is getting collapsed.
Please find the attached screenshot.
Some of the values are coming in left hand side, actually all values should come on the Right Hand Side itself.
If i have to show the label & value inside the table means. How to bring the iterating values inside table.?