如何让Bootstrap-UI的Datepicker和Timepicker呈行内显示？

我想实现让Bootstrap-UI的日期选择器和时间选择器组件在同一行内显示，效果如下：

我已经尝试了好几种方法，但始终没法让这两个组件完全对齐。目前我的代码如下：

<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>

更新1：我试着把uib-timepicker的外层标签从div改成span，结果直接导致日期选择器组件失效了。

更新2：这里需要明确一下，我使用的是Angular UI Bootstrap库。

更新3：后来我基于已解决的方案，把示例中的单位改成了相对单位，优化了布局的适配性。

内容的提问来源于stack exchange，提问作者tonysepia