Content moves alone - HTML - html

Question

Can someone explain me why when I toggle the tabs, the content is not aligned horizontally on both tabs?
If you notice, the content table moves to the left when you go to the document.
I can't figure it out why this is happening. Any help?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="content">
<ul class="nav nav-tabs">
<!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 -->
<!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<li ng-if="vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2" class="ng-scope" style=""><a data-toggle="tab" href="#customer1Content" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Customer 1 Information</a></li>
<!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<li class=""><a data-toggle="tab" href="#documentContent" class="ng-binding" aria-expanded="false"><i class="glyphicon glyphicon-file"></i> Document Information</a></li>
</ul>
<div class="tab-content top5">
<!-- ngIf: !vm.selectedTicket.customerName1 && !vm.selectedTicket.customerName2 && vm.selectedTicket.customerName -->
<!-- ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<div ng-if="vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2" id="customer1Content" class="tab-pane fade ng-scope" style="">
<table class="table ipp-simple-table">
<tbody>
<tr>
<th class="first-no-border ng-binding">Customer Number</th>
<td class="first-no-border ng-binding">333</td>
</tr>
<tr>
<th class="ng-binding">Customer Name</th>
<td class="ng-binding">Name1</td>
</tr>
<tr>
<th class="ng-binding">Birth Date</th>
<td class="ng-binding">08.12.2017</td>
</tr>
<tr>
<th class="ng-binding">Account Number</th>
<td class="ng-binding">123</td>
</tr>
<tr>
<th class="ng-binding">Status</th>
<td>
<!-- ngIf: vm.selectedTicket.status.description == 'New' --><span ng-if="vm.selectedTicket.status.description == 'New'" class="ipp-color ng-scope"><b class="ng-binding">New</b></span>
<!-- end ngIf: vm.selectedTicket.status.description == 'New' -->
<!-- ngIf: vm.selectedTicket.status.description == 'Closed' -->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="ng-binding">Target Ticket
</th>
<td>
<select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
<option label="1" value="object:49">1</option>
<option label="2" value="object:50">2</option>
<option label="3" value="object:51">3</option>
<option label="4" value="object:52">4</option>
<option label="5" value="object:53">5</option>
<option label="6" value="object:54" selected="selected">6</option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- end ngIf: vm.selectedTicket.customerName1 && vm.selectedTicket.customerName2 -->
<div id="documentContent" class="tab-pane fade">
<table class="table ipp-simple-table">
<thead>
</thead>
<tbody>
<tr>
<th class="first-no-border ng-binding">Document ID</th>
<td class="first-no-border ng-binding">6</td>
</tr>
<tr>
<th class="ng-binding">Document Date</th>
<td class="ng-binding">05.12.2018</td>
</tr>
<tr>
<th class="ng-binding">Document Type</th>
<td class="ng-binding">9999</td>
</tr>
<tr>
<th class="ng-binding">Description</th>
<td class="w-50 ng-binding">Unkategorisiert</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="ng-binding">Target Ticket</th>
<td>
<select ng-options="ticket.docid for ticket in vm.tickets" ng-model="vm.selectedTicket" class="ng-pristine ng-untouched ng-valid">
<option label="1" value="object:49">1</option>
<option label="2" value="object:50">2</option>
<option label="3" value="object:51">3</option>
<option label="4" value="object:52">4</option>
<option label="5" value="object:53">5</option>
<option label="6" value="object:54" selected="selected">6</option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>
</div>