title: Bootstrap datetimepicker strange positioning on a different div altogether
body: <p>I am using bootstrap datetimepicker with formatting to enable only editing time in my code, I do it like this: </p>
  
  <pre><code>function setTimepicker(object){
      object.datetimepicker({
                  format: 'HH:mm'
              });
  }
  </code></pre>
  
  <p>I call this function in document.ready like so:</p>
  
  <pre><code>$(document).ready(function(){
     setTimepicker(starttimefield);
     setTimepicker(endtimefield);
  });
  </code></pre>
  
  <p>The html I am using is like this: </p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;form id="myform"&gt;
           &lt;p&gt; &lt;b&gt;Create a New Event:&lt;/b&gt;&lt;/p&gt;                                      
           &lt;br&gt;
           &lt;p&gt;Description for main page: &lt;br&gt;
              &lt;textarea id="summary" name="summary" maxlength="100"&gt;&lt;/textarea&gt;
           &lt;/p&gt;
           &lt;p&gt; Full description: &lt;br&gt;
              &lt;textarea id="description" name="description" maxlength="500"&gt;&lt;/textarea&gt;
           &lt;/p&gt;
           &lt;div class="wrapper"&gt;
               &lt;div class="titles"&gt;
                   &lt;p&gt; Event date:  
                   &lt;/p&gt;
                   &lt;p&gt; Start time:                                         
                   &lt;/p&gt;                                        
                   &lt;p&gt; End time:    
                   &lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="values"&gt;
                       &lt;input type="text" id="eventdate" readonly/&gt;&lt;br&gt;
                       &lt;div id="starttimepicker"&gt;
                           &lt;input type="text" id="starttime" onkeydown="return false"/&gt;&lt;br&gt;
                       &lt;/div&gt;
                       &lt;div id="endttimepicker"&gt;
                           &lt;input type="text" id="endtime" onkeydown="return false"/&gt;                                            
                       &lt;/div&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
              &lt;p&gt; Location: &lt;input type="text" id="location"/&gt; &lt;/p&gt;
  
              &lt;p&gt;&lt;input type="hidden" id="userid" value="&lt;?php echo Auth::id();?&gt;"/&gt;&lt;/p&gt;
              &lt;p&gt;&lt;input id="saveevent" type="button" value="Save Event" /&gt;
                                          &lt;/p&gt;
       &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Except for the standard css files (jquery-ui.css, bootstrap-datetimepicker.css) I added 1 extra css file that contains:</p>
  
  <pre><code>.wrapper {
      display: inline-block;
      width: auto;
      overflow: hidden;
  }
  .titles {
      width: 100px;
      float:left;
  }
  .values {
      overflow: hidden;
      margin-left: 100px;
  }
  </code></pre>
  
  <p>Now for the issue at hand, the fields endtime and starttime should have a timepicker when clicked (this works) but look at where it renders the timepicker in this image:</p>
  
  <p><img src="https://i.stack.imgur.com/2FpdR.png" alt="enter image description here"></p>
  
  <p>Can anyone help me to get that timepicker element next to (or above or close by, anything) the field that it belongs to</p>