Bootstrap datetimepicker seltsame Positionierung auf einem anderen div-insgesamt

Ich bin mit bootstrap datetimepicker mit Formatierung, damit nur die Bearbeitung Zeit in meinem code, ich mache es so:

function setTimepicker(object){
    object.datetimepicker({
                format: 'HH:mm'
            });
}

Rufe ich diese Funktion im Dokument.bereit etwa so:

$(document).ready(function(){
   setTimepicker(starttimefield);
   setTimepicker(endtimefield);
});

Html ich verwende ist wie folgt:

<div class="panel-body">
    <form id="myform">
         <p> <b>Create a New Event:</b></p>                                      
         <br>
         <p>Description for main page: <br>
            <textarea id="summary" name="summary" maxlength="100"></textarea>
         </p>
         <p> Full description: <br>
            <textarea id="description" name="description" maxlength="500"></textarea>
         </p>
         <div class="wrapper">
             <div class="titles">
                 <p> Event date:  
                 </p>
                 <p> Start time:                                         
                 </p>                                        
                 <p> End time:    
                 </p>
                 </div>
                 <div class="values">
                     <input type="text" id="eventdate" readonly/><br>
                     <div id="starttimepicker">
                         <input type="text" id="starttime" onkeydown="return false"/><br>
                     </div>
                     <div id="endttimepicker">
                         <input type="text" id="endtime" onkeydown="return false"/>                                            
                     </div>
                 </div>
            </div>
            <p> Location: <input type="text" id="location"/> </p>

            <p><input type="hidden" id="userid" value="<?php echo Auth::id();?>"/></p>
            <p><input id="saveevent" type="button" value="Save Event" />
                                        </p>
     </form>
</div>

Außer für die standard-css-Dateien (jquery-ui.css, bootstrap-datetimepicker.css) ich habe 1 extra css-Datei, die enthält:

.wrapper {
    display: inline-block;
    width: auto;
    overflow: hidden;
}
.titles {
    width: 100px;
    float:left;
}
.values {
    overflow: hidden;
    margin-left: 100px;
}

Nun für die Frage auf der hand, die Felder endtime und starttime sollte ein timepicker, wenn Sie geklickt werden (das funktioniert), sondern schauen Sie, wo es macht der timepicker in diesem Bild:

Kann mir jemand helfen um das zu bekommen timepicker-element neben (oder oberhalb oder in der Nähe, nichts) das Feld, es gehört zu