使用Flexbox，Tabler UI中的卡片高度将不相等

Question

我正在使用Tabler UI通过列内的.card在我的网站上放置卡片。我想让两张卡片的高度相等。

我的HTML看起来像这样：

<div class="container">
    <div class="row row-cards">
        <div class="col-lg-5">
            <div class="row row-cards row-deck">
                <div class="col-sm-12 col-md-6">
                    <div class="card text-center">
                        <div class="card-status bg-blue"></div>
                        <div class="card-header">
                            <h3 class="card-title">Interne punten</h3>
                        </div>
                        <div class="card-body">
                            <div class="h1">0</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6">
                    <div class="card text-center">
                        <div class="card-status bg-blue"></div>
                        <div class="card-header">
                            <h3 class="card-title">Externe punten</h3>
                        </div>
                        <div class="card-body">
                            <div class="h1">0</div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-md-12">
                    <div class="card text-center">
                        <div class="card-status bg-blue"></div>
                        <div class="card-header">
                            <h3 class="card-title">Totale punten</h3>
                        </div>
                        <div class="card-body">
                            <div class="h1">0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="row row-cards row-deck">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-status bg-red"></div>
                        <div class="card-header">
                            <h3 class="card-title">Punten per interne categoriën</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table card-table table-striped table-vcenter table-hover">
                                <tbody>
                                    <tr>
                                        <td>TestRow</td>
                                        <td>22.5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-status bg-red"></div>
                        <div class="card-header">
                            <h3 class="card-title">Punten per externe categoriën</h3>
                        </div>
                        <div class="table-responsive">
                            <table class="table card-table table-striped table-vcenter table-hover">
                                <tbody>
                                    <tr>
                                        <td>SeondTestRow</td>
                                        <td>23</td>
                                    </tr>
                                    <tr>
                                        <td>testrow24</td>
                                        <td>3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
                        <thead>
                            <tr>
                                <th class="text-center w-1">
                                    <i class="icon-people"></i>
                                </th>
                                <th>User</th>
                                <th>Usage</th>
                                <th class="text-center">Payment</th>
                                <th>Activity</th>
                                <th class="text-center">Satisfaction</th>
                                <th class="text-center">
                                    <i class="icon-settings"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

它将行分为两列。左列应该有两张相邻的卡（.col-6），而在全长的下一张（.col-12）下方。

右列还应该有两张相邻的卡片（.col-6），下面没有任何卡片。这两个卡应该具有相同的高度，现在可以使用父行上的.row-deck类来工作。

我还希望这些列（右侧）的最小高度为左侧。图片中的右列应延伸到“ Totale punten”卡上。

我尝试过的是.h-100元素上的.card。这导致其中的一些没有空白或填充，这使得使用起来很困难。

执行此操作的最佳方法是什么？我在做什么错了？