Как сделать так, чтобы bootstrap-ui datepicker и timepicker были встроены?

Question

Есть ли способ, чтобы компоненты bootstrap-ui выглядели встроенными, например, так:

Я пробовал разные вещи, но не могу заставить их все выровнять.Вот 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>

ОБНОВЛЕНИЕ:

Попытался изменить тег uib-timepicker с div на span,но это нарушает компонент datepicker: https://plnkr.co/edit/CjBzCthVyoQAVooi5oR7?p=preview

UPDATE2: Чтобы понять, этот вопрос касается этой библиотеки: https://angular -ui.github.io / bootstrap /

ОБНОВЛЕНИЕ3: Обновлен plunkr, представленный в принятом ответе, с относительными единицами: https://plnkr.co/edit/TaoVJZwCjh1uLyz3huk9?p=preview

Answer 1

• Измените последний тег div на тег span.
• Добавьте два новых класса CSS:
  • .buttonClass {vertical-align: top;}
  • .timeClass table: first-child {top: -35px;позиция: относительная;}
• Добавить класс кнопки к span, который содержит кнопку,
• Добавить класс времени к span, который содержит средство выбора времени.