AngularJS文本框和日历图标需要并排显示

Question

我正在尝试使输入按钮和日历图标并排显示，但目前显示如下

HTML：

<div>
    <label style="font-size: medium">From Date (yyyy-mm-dd)</label>
    <p class="input-group">
        <input type="text" class="form-control"
            id="fromDate"
            name="fromDate"
            uib-datepicker-popup="{{format}}"
            ng-model="request.fromDate"
            is-open="popup1.opened"
            datepicker-options="dateOptions"
            ng-required="true"
            close-text="Close"
            alt-input-formats="altInputFormats"
            required />
        <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
    </p>
    <div style="color:maroon" ng-messages="homeForm.fromDate.$error"
        ng-if="homeForm.fromDate.$touched">
        <div ng-message="required">This field is required</div>
    </div>
</div>

以前，我为日历按钮设置了一个单独的span类，这更加糟糕了：

<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open2()">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

我尝试在两个字段上都使用<div class="col-md-6">，这使得两个字段都像并排显示