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

i have 2 colums textfield. can choose amount of textfields combobox. here first picture

when choose amount of textfields right side can situation.

so far when choose 0 on left side second colums comes left side.

when choose 0 want right colum stay in place instead of going left. how can 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> 

there many ways achieve want, must include either float, fix width.

here solution includes repeater 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 $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 $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 = [];     (var = 0; < length; i++) {       newarr.push(txt + i);     }     return newarr;   } }]); 

fiddle example