Align col height when data is lazy loaded

Question

I have the following row:

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

within the <admin-academy-progress> i have the following 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>

The chart is a highchart and is being rendered as soon as there is some data

In my <admin-top-user-activity> directive i have:

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

This produces the following result:

As you can see the right box does not have an aligned height.

To try and achieve this i have attempted to create the row-req-height class:

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

However as you can see without luck.

So my question is how will i align the height?