Bootstrap 3.1 form-horizontal button group problem

Question

I'm using horizontal form in bootstrap 3.1 where the label is directly above the input. I'm trying to do an input with an attached button, but the alignment is off since the label increases the line height. Does anyone know how to fix it? Bootply

<form name="ReservationForm" class="form-horizontal">
  <div class="form-group form-group-sm">                                                                                    
     <!-- Reservation Date -->                                      
     <div class="col-sm-2">
       <label class="control-label required" for="reservationDate"><span class="sr-only">Required</span>Appointment Date</label>
       <input name="reservationDate" class="form-control  dateField hasDatepicker" id="reservationDate" type="text" size="25" readonly="readonly" value="">                                 
     </div>
     <div class="col-sm-3">                                                                                         
       <div class="input-group">
         <label class="control-label" for="reservationStartTime">Appointment Time </label>
         <input class="form-control" id="reservationStartTime" type="text" readonly="true" value="No time slots displayed">                                                                 
         <div class="input-group-btn">
           <input name="actionType" class="btn btn-primary btn-sm" id="actionType" type="submit" value="Search Time Slots">                                                                                                 
         </div>
       </div>
    </div>  
  </div>
</form> 

Answer 1

Yes, the .control-label ruins the .input-group because <label>'s must come outside the input group; simply move it outside or "one level up":

<div class="col-sm-3">                                           
  <!-- label moved outside input-group -->                                              
  <label class="control-label" for="reservationStartTime">Appointment Time </label>

  <div class="input-group">
     <input class="form-control" id="reservationStartTime" type="text" readonly="true" value="No time slots displayed">                                                                 
     <div class="input-group-btn">
        <input name="actionType" class="btn btn-primary btn-sm" id="actionType" type="submit" value="Search Time Slots">                                                                                                 
     </div>
  </div>
</div> 

That will work.