在延迟加载数据时对齐col高度

Question

我有以下一行：

<div class="row row-eq-height">
<div class="col-xs-8" id="progressionBox">
    <admin-academy-progress></admin-academy-progress>
</div>
<div class="col-lg-4">
    <admin-top-user-activity></admin-top-user-activity>
</div>

在<admin-academy-progress>内我有以下html：

    <div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-12">
                <h4 class="h4 font-thin text-muted" translate="DASHBOARD.ADMIN_DASHBOARD.LEARNING_PATH_PROGRESSION"></h4>
            </div>
        </div>

    </div>

    <div class="panel-body" ng-if="newData">
        <div class="row">
            <div class="col-xs-12">
                <select class="form-control" ng-required="ngRequired" ng-model="selected"
                        ng-change="selectPath(selected)"
                        ng-options="item as item.name for item in partitions | orderBy:'name'">
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <lb-chart chart-type="column" chart-data="newData"
                          label-key="'name'"
                          height="400"
                          average-set="selected.completionPercentage"
                          series="[
                                 {name: 'ANALYTICS.COMPLETION_RATE',type: 'column', dataKey: 'completionPercentage',tooltip: {valueSuffix: ' '}}
                                ]">
                </lb-chart>
            </div>
        </div>
    </div>
</div>

图表是highchart，只要有一些数据就会呈现

在<admin-top-user-activity>指令中，我有：

<div class="panel panel-default" style="height: auto;" ng-if="topActivity">
<div class="panel-heading">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="h4 font-thin text-muted">{{'DASHBOARD.ADMIN_DASHBOARD.TOP_COMPLETED_MODULES' | translate}}</h4>
        </div>
    </div>
</div>
<div class="panel-body" style="height: auto;">
    <table class="table table-striped m-b-none">
        <thead>
        <th>{{'TERMS.USERNAME' | translate}}</th>
        <th>{{'DASHBOARD.MY_DASHBOARD.COMPLETED_MODULES' | translate}}</th>
        </thead>
        <tbody>
        <tr ng-repeat="activity in topActivity">
            <td>
                {{activity.user.profile.firstname}} {{activity.user.profile.lastname}}
            </td>
            <td>
                {{activity.activityCount}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

这会产生以下结果：

如您所见，右侧框没有对齐的高度。

为了尝试实现这一点，我试图创建row-req-height类：

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

然而，你可以看到没有运气。

所以我的问题是如何调整高度？