Buonasera a tutti
ho un piccolo problema, sto inserendo un calendario di bootstrap che mostra un range tra 2 date (arrivo e partenza).

Se lo scrivo cosi' non ho problemi:
codice:
<div class="form-group table-bordered">
  <label for="arrivo" class="col-sm-3 control-label">Arrivo</label>
    <div class="input-daterange col-sm-6" id="datepicker">
        <input type="text" class="form-control" name="start" required/>
    <span class="add-on" style="vertical-align: top;height:20px">Partenza</span>
        <input type="text" class="form-control" name="end" required/>
    </div>
  </div>
La cosa brutta e' che il testo "Partenza" non me lo da sotto ad Arrivo ma spostato come si evince dalo screenshot che allego

http://snag.gy/sAUso.jpg

Se invece creo un nuovo div riesco a renderlo graficamente come voglio, ma non funziona piu' il daterange.
E sarebbe cosi:
codice:
<div class="input-daterange form-group table-bordered">
    <label for="arrivo" class="col-sm-3 control-label">Arrivo</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="datepicker" name="start" required>
    </div>
  </div>
  
  <div class="input-daterange form-group table-bordered">
    <label for="partenza" class="col-sm-3 control-label">Partenza</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="datepicker" name="end" required>
    </div>
  </div>
Mentre il javascript che mi apre il calendario e' questo:
codice:
<script type="text/javascript">
   $(document).ready(function () 
   {
       $('.input-daterange').datepicker
       ({
          format: "dd/mm/yy",
               startDate: "today",
             language: "it",
          autoclose: true,
          todayHighlight: true    
           });
            
   });
</script>
Dove sbaglio e come potrei risolvere?

Grazie