How to Achieve Equal Card Heights Dynamically with Bootstrap 5?

Question

Heyo,

I'm working with Bootstrap 5 to create a grid of cards, and I want these cards to have the same height based on the card with the most text dynamically.

I've tried using Flexbox, but it's not working as expected. How can I achieve equal card heights that adjust dynamically based on content in Bootstrap 5?

This is what I tried to no avail:

%asset_contents%

<style>
    .subject-card-v2{
        border-radius: 16px;
        background: #FFF;
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
        color:#000;
        display: flex;
        flex-direction: column;
    }
    .subject-img-test {
        max-width: 100%;
        height: 100%;

        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        
    }
    .subject-link{
        text-decoration:none !important;
    }
    .subject-link h5:hover{
        color:var(--herts-purple) !important ;
    }
    .subject-link{
    transition: transform 250ms !important;
    }
    .subject-link:hover{
        transform: translateY(-10px) !important;
    }
    
    @media (min-width: 768px) { 
        .subject-img-height{
            height:200px;
        }
        .subject-card-v2{
            max-height:300px;
        }
        
    }
    
    @media (max-width: 767.98px) { 
       .subject-img-test{
            height:100%;
            border-bottom-right-radius: 0px !important;
            border-top-right-radius: 0px !important;
            border-bottom-left-radius: 15px !important;
        }
        .card-body{
            min-height:100px;
        }
        
    }
    .card-container {
        display: flex;
        flex-wrap: wrap;
    }

    .card {
        flex: 1;
    }
</style>
<div class="my-5">
    <div class="container">
        <!--Title-->
        <div class="row g-0 me-0">
            <div class="container text-center col-lg-12 col-12">
                <h2 class="section-title text-center display-4 pb-2">Lorem Ipsums Card Title</h2>
            </div>
        </div>
        <!--Parent-->
        <div class="row row-cols-1 row-cols-md-3 g-4 card-container">
            <!-- Child-1 -->
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card mb-3 " style="max-width: 540px;">
                    <a class="subject-link" href="#">
                        <div class="row g-0 subject-card-v2">
                            <div class="col-md-12 col-6 subject-img-height ">
                                <img src="https://placehold.jp/512x288.png" class="subject-img-test" alt="..." style="object-fit: cover;">
                            </div>
                            <div class="col-md-12 col-6">
                                <div class="card-body">
                                    <h5 class="card-title my-md-2 my-4">Lorem ipsum dolor sit amet consectetur adipiscing </h5>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!-- Child-2 -->
            <div class="col-lg-4 col-md-6 col-12">
                <div class="card mb-3 " style="max-width: 540px;">
                    <a class="subject-link" href="#">
                        <div class="row g-0 subject-card-v2">
                            <div class="col-md-12 col-6 subject-img-height ">
                                <img src="https://placehold.jp/512x288.png" class="subject-img-test" alt="..." style="object-fit: cover;">
                            </div>
                            <div class="col-md-12 col-6">
                                <div class="card-body">
                                    <h5 class="card-title my-md-2 my-4">Lorem ipsum</h5>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Any help would be much appreciated.