Get a layout with items with different heights in a single row using flexbox

Question

I have been trying to get this going row-wise using flexbox. But as I have been researching, I guess I can't get it using flexbox. I have come across some answers that are suggesting to use the grid layout. But I can't figure out how I can do this. I can share my code as far:

        <ul class="card-grid no-gutters">
            @foreach($list as $key => $restaurant)
                @if($key < 2)
                    @include('web.page.restaurant.elements.item', ['item' => $restaurant])
                @endif
            @endforeach
            <div class="card-grid__map-container">
                Google Map
            </div>
            @foreach($list as $key => $restaurant)
                @if($key > 1)
                    @include('web.page.restaurant.elements.item', ['item' => $restaurant])
                @endif
            @endforeach
        </ul>


.card-grid {
    $card-mb: 30px;
    $gutter: 6px;
    $gutter-md: 10px;
    $gutter-xl: ($grid-gutter-width / 2);
    // The main container is a row with no-gutters setting
    // <ul class="card-grid row">
    margin-bottom: -$card-mb;
    display: flex;
    flex-wrap: wrap;

    @media (min-width: map-get($grid-breakpoints, 'sm')) and (max-width: map-get($grid-breakpoints, 'md') - 1) {
        margin-left: -$gutter;
        margin-right: -$gutter;
    }

    @media (min-width: map-get($grid-breakpoints, 'md')) and (max-width: map-get($grid-breakpoints, 'xl') - 1) {
        margin-left: -$gutter-md;
        margin-right: -$gutter-md;
    }

    @include media-breakpoint-up(xl) {
        margin-left: -$gutter-xl;
        margin-right: -$gutter-xl;
    }

    // This items is also a Bootstrap grid items
    // with the following breakpoint setting
    // <li class="card-grid__item col-12 col-sm-6 col-lg-4">
    &__item {
        margin-bottom: $card-mb;

        // The cards would be too narrow in md-lg sizes so we introduce smaller grid gutters in those sizes
        // We need important to overwrite the reset rule comming from .no-gutters class
        width: 33.3333333333%;
        max-height: 400px;
        padding: 0 $gutter-xl !important;

        @media only screen and (max-width: 992px) and (min-width: 576px) {
            width: 50%;
            padding: 0 $gutter-md !important;
        }

        @media only screen and (max-width: 576px) {
            width: 100%;
            padding: 0 !important;
        }
    }

    &__map-container {
        @extend .card-grid__item;
        height: 80vh !important;
    }
}

But my map container is the same size as other boxes.