在HTML <div>中遍历数组时对齐方式发生变化

Question

我正在遍历数组并使用HTML组件显示值。

请在下面找到我的HTML标记：

    <div ng-show="showHistory" class="history-log"> 
      <h5> {{'claim.group.history.label'|translate}}<a href="" ng-click="showHistory=false" class="btn-close">&times;</a></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>

在显示值时，如果有更多可用值，则对齐方式将被折叠。

请找到附件的屏幕截图。

其中一些值位于左侧，实际上所有值都应位于右侧本身。

如果我必须在表格内显示label和value。如何将迭代值引入表中？