title: How to make bootstrap-ui datepicker and timepicker be inline?
body: <p>Is there a way to make bootstrap-ui components appear inline, like so:
  <a href="https://i.stack.imgur.com/ZJ0xk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZJ0xk.png" alt="enter image description here"></a></p>
  
  <p>I have tried various things but I can't get them all to align. Here is the <a href="https://plnkr.co/edit/XMXmKIKBpE01n4tjb4k3?p=preview" rel="nofollow noreferrer">Plunkr</a></p>
  
  <pre><code>  &lt;div class="col-md-6"&gt;
      &lt;p class="input-group"&gt;
        &lt;input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button type="button" class="btn btn-default" ng-click="open1()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/span&gt;
         &lt;div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"&gt;&lt;/div&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Have tried changing the uib-timepicker tag from <code>div</code> to <code>span</code>, but that breaks the datepicker component: <a href="https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview</a></p>
  
  <p><strong>UPDATE2:</strong>
  To calrify, this question is about this library: <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">https://angular-ui.github.io/bootstrap/</a></p>
  
  <p><strong>UPDATE3:</strong>
  Updated the plunkr provided in the accepted answer with relative units: <a href="https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview</a></p>