Html 在列中弯曲子对象，拉伸其他子对象

我已经包括了一个代码笔，以显示我在哪里，我试图实现什么

这是我的HTML：

<div class="container">
    <div class="row l-flex">
        <!-- START COL 6 -->
        <div class="col-md-6">
            <div class="greybox">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Title of the box</h2>
                    </div>
                </div>
                  <div class="row l-flex">
                      <div class="col-md-12">
                        <div class="row l-flex-children">
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Revelant data</h3>
                                        <p>Today</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Data</h3>
                                        <p>Filler text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COL 6 -->
        <!-- START COL 6 -->
        <div class="col-md-6">
            <div class="greybox">
                <div class="row">
                    <div class="col-md-12">
                        <h2>Title of the box</h2>
                    </div>
                </div>
                  <div class="row l-flex">
                      <div class="col-md-12">
                        <div class="row l-flex-children">
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Revelant data</h3>
                                        <p>Today</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="statbox">
                                    <div class="absolute-center">
                                        <h3>Data</h3>
                                        <p>Filler text</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COL 6 -->
    </div>
</div>

我需要孩子们伸展到容器的高度。如果有一个statbox因为其内容而拉伸，我希望它们都具有相同的高度

---

编辑：我可以提供更多信息吗？我已经尝试解决这个问题很长一段时间了，但仍然没有找到令人信服的答案。

使用当前的布局，而不是没有javascript使用当前的布局，而不是没有javascript

.l-flex {
    display: flex;
    > [class*='col-'] {
        flex: 1;
    }
}

.l-flex-children {
    display: flex;
    > [class*='col-'] {
        display: flex;
        > * {
            flex: 1;
        }
    }
}