HTML & bootstrap/ text is override another table - html

Question

I have the following code in HTML, using bootstrap:
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group" ng-repeat="app in allKeys track by $index">
<label for="inputEmail2" class="col-md-4 control-label">{{app}}</label>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
I have two main problem:
If the text is too long in the label section ({{app}}), the text is continue in the line, and override the text in the table section.
If I minimize the browser windows, the container doesn't get the correct size.
I think that this issues are result of definition in the css, that should adjust the text to the appropriate size of the window/column, but I didn't find any css definition for that.

Answer 1

As mentioned in the comments, your main problem is just a missing closing <div> tag. You haven't closed the container-fluid. You can see it working in this Bootply
I also changed your col-md-4 to col-sm-4, as your table wrapper was using sm definitions, which meant that your label would have broken to full width at 'medium' size and your table would have broken to full width at 'small' size, which caused some layout inconsistencies.

Answer 2

you can try this code :
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="container-fluid form-group row" ng-repeat="app in allKeys track by $index">
<div class="col-sm-6">
<label for="inputEmail2" class="col-md-4 control-label">{{app}} </label></div>
<div class="col-sm-6 table-responsive">
<table class="table">
<tr>
<td ng-repeat="app1 in allDesc[$index]"><b> {{app1}}</b> </td>
</tr>
<tr >
<td ng-repeat="app2 in allValues[$index]"> {{app2}} </td>
</tr>
</table>
</div>
</form>
</div>
making the width to 100% and splitting the blocks accordingly, will help the browser to display the content in a proper way and remember to close the "div" whenever the content for the div is over. Else, the following content will go with misplacement.