How can I fix the position of a second colum? - css

Question

I have two colums with textfield. You can choose the amount of the textfields with the combobox. Here is the first picture
When I choose the amount of textfields from the right side then you can this situation.
So far so good but when I choose 0 on the left side the second colums comes to the left side.
When I choose 0 I want that the right colum stay in his place instead of going to the left. How can I do that?
The code:
<div class="form-group">
<label>Invulveld 1:</label>
<input ng-hide="vm.datasource.billLevel < 1 " type="text" ng-model="vm.datasource.text1Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 1" type="text" ng-model="vm.datasource.text1Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 2:</label>
<input ng-hide="vm.datasource.billLevel < 2" type="text" ng-model="vm.datasource.text2Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 2" type="text" ng-model="vm.datasource.text2Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 3:</label>
<input ng-hide="vm.datasource.billLevel < 3" type="text" ng-model="vm.datasource.text3Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 3" type="text" ng-model="vm.datasource.text3Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 4:</label>
<input ng-hide="vm.datasource.billLevel < 4" type="text" ng-model="vm.datasource.text4Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 4" type="text" ng-model="vm.datasource.text4Contract" style="margin-right:153px; width:156px;" />
</div>
<div class="form-group">
<label>Invulveld 5:</label>
<input ng-hide="vm.datasource.billLevel < 5" type="text" ng-model="vm.datasource.text5Bill" style="width:148px;" />
<input ng-hide="vm.datasource.contractLevel < 5" type="text" ng-model="vm.datasource.text5Contract" style="margin-right:153px; width:156px;" />
</div>

Answer 1

There are many ways to achieve what you want,
It must include either float, fix width.
Here is a solution which includes repeater which is very recommended
Html:
<div class="wrapper" ng-app="myApp" ng-controller="Ctrl">
<div class="left">
<select ng-model="vm.selectLeft">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<div>
<input ng-repeat="txt in getText('left',vm.selectLeft) track by $index" ng-value="txt" />
</div>
</div>
<div class="right">
<select ng-model="vm.selectRight">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<div>
<input ng-repeat="txt in getText('right',vm.selectRight) track by $index" ng-value="txt"/>
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
}
.left,
.right{
float:left;
width: 40%;
margin:10px;
}
select, input{
width:100%;
}
.wrapper input {
margin-top: 10px;
}
JS:
var app = angular.module('myApp', []);
app.controller('Ctrl', ['$scope', function($scope) {
$scope.getText = function(txt, length) {
var newArr = [];
for (var i = 0; i < length; i++) {
newArr.push(txt + i);
}
return newArr;
}
}]);
Fiddle example