html - How to keep row position same when zoom your browser more than 100% using Bootstrap? -

i have small issue bootstrap grid system , have row has grid setup 2 sections col-md-6 , problem when zoom browser more 100% close label , input moving next line. want them stay same place time zoom should not effect position of rows.i tried use col-xs-1 not work. how can achieve task using bootstrap ?

main.html

<div class="row">                 <div class="container col-md-6">                     <div class="form-group">                         <label class="col-md-5">actual cycle start:</label>                         <div class="col-md-7">                             <div class="row">                                 <div class="col-xs-5">                                     <input class="form-control" ng-model="riskassessmentdto.cyclestartdate"                                          k-format="'mm/dd/yyyy'" disabled />                                 </div>                                 <div class="col-xs-1">                                     <label class="control-label"> close:</label>                                 </div>                                 <div class="col-md-5 changewdh">                                     <input class="form-control" ng-model="riskassessmentdto.cycleenddate" k-format="'mm/dd/yyyy'" disabled />                                 </div>                             </div>                         </div>                     </div>                 </div>                 <div class="form-group col-md-6 fieldheight">                     <label for="challengeoutstand" class="col-md-5">challenges                         outstanding:</label>                     <div class="col-md-7">                         <input type="text" class="form-control" id="challengeoutstand"                             name="challengeoutstand" maxlength="256"                             ng-model="riskassessmentdto.challengesoutstanding" disabled />                     </div>                 </div>              </div> 

main.css

.changewdh{       width: 152px; } 

edit: try this:

<div class="container">     <div class="row">         <div class="col-6-md">             <div class="col-md-7">                 <div class="row">                     <div class="col-xs-1">                         <label class="col-md-5">actual cycle start:</label>                     </div>                     <div class="col-xs-5">                         <input class="form-control" ng-model="riskassessmentdto.cyclestartdate"                                      k-format="'mm/dd/yyyy'" disabled />                     </div>                 </div>                 <div class="row">                     <div class="col-xs-1">                         <label class="control-label"> close:</label>                     </div>                     <div class="col-xs-5 changewdh">                        <input class="form-control" ng-model="riskassessmentdto.cycleenddate" k-format="'mm/dd/yyyy'" disabled />                     </div>                 </div>             </div>         </div>     </div>     <div class="col-md-6 fieldheight">         <label for="challengeoutstand" class="col-xs-5">challenges                     outstanding:</label>         <div class="col-xs-7">             <input type="text" class="form-control" id="challengeoutstand"                         name="challengeoutstand" maxlength="256"                         ng-model="riskassessmentdto.challengesoutstanding" disabled />         </div>     </div> </div> 

place col-5 , col-1 row div's or make them both xs, not 1 md , 1 xs, , place them div container class "col-md-6"