Bootstrap Datepicker goes bottom

Question

I am not an expert in Bootstrap 3. It was my first time to use the widget "datepicker". I have two date pickers that need to be displayed inline to each other. When I try a normal input it works but if it is a date picker it goes a little far at the bottom. I tried the position relative however it did not resolve the issue. See screen shot attached.Date picker goes at the bottom Hope some one can give me some light. Below is my code.`

<div class="horiz-search-bar-wrapper">
              <form class="form-inline">
                <div class="form-group">
                  <label><strong>Search</strong></label>
                </div>

                <div class="input-daterange">
                  <div class="form-group rel-position-date">
                    <label>Check-In:</label>
                    <div class="input-group input-append date" id="from">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                  <div class="form-group rel-position-date">
                    <label>Check-Out</label>
                    <div class="input-group input-append date" id="to">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>


                <div class="form-group mar-left">
                  <button type="button" class="btn btn-primary">
                           Submit
                  </button>
                </div>
              </form>
         </div>

`

Answer 1

Just an update to this, we were able to fixed the issue by replacing the <label></label> tag to <span></span>. The bootstrap datepicker adds top pixels when it sees more than 1 label.

Hope this could help the others.