How to make bootstrap-ui datepicker and timepicker be inline?

Question

Is there a way to make bootstrap-ui components appear inline, like so:

I have tried various things but I can't get them all to align. Here is the Plunkr

  <div class="col-md-6">
    <p class="input-group">
      <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" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
       <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
    </p>
  </div>

UPDATE:

Have tried changing the uib-timepicker tag from div to span, but that breaks the datepicker component: https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

UPDATE2: To calrify, this question is about this library: https://angular-ui.github.io/bootstrap/

UPDATE3: Updated the plunkr provided in the accepted answer with relative units: https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview

Answer 1

• Change the last div tag to span tag.
• Add two new CSS classes:
  • .buttonClass{ vertical-align:top; }
  • .timeClass table:first-child { top:-35px; position:relative; }
• Add button class to span which holds the button,
• Add time class to span that holds time picker.