JSFiddle - React, Tailwind, and code Playground

HTML

<flex-container-1><!-- main container -->

    <flex-item></flex-item><!-- flex item #1 (first column) -->
    
    <flex-container-2><!-- flex item #2 / nested flex container (second column) -->
    
        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

        <flex-item></flex-item>

    </flex-container-2><!-- close nested container -->
    
</flex-container-1><!-- close main container -->

CSS

flex-container-1 {
    display: flex;                    /* establish flex container */
    flex-direction: row;              /* flex items will align horizontally */
    justify-content: center;          /* align flex items horizontally */
    align-items: center;              /* align flex items vertically */
    
    /* for demo purposes only */
    height: 250px;
    width: 400px;
    border: 1px solid #777;
    background-color: lightgreen;
}

flex-container-1 > flex-item {
    height: 90%;
    flex: 0 0 45%;
    margin-right: 8px;             /* a bit of space between centered flex items */
    border: 1px dashed #333;
    background-color: yellow;
}

flex-container-2 {
    height: 90%;
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;         /* flex items (in second column) will stack vertically */
    justify-content: space-between; /* align flex items vertically */
}

flex-container-2 > flex-item {
    flex: 0 0 22%;
    border: 1px dashed #333;
    background-color: yellow;
}