JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <!-- <div class="child">7</div> -->
        <!-- <div class="child">8</div> -->
    </div>
</div>
This content is out of place

CSS

.container {
    position: relative;
    display: inline-block;
    background: rgba( 10, 10, 10, 0.1 ); /* you would have no background here so it's clear */
    padding: 10px;
}

.container::after {
    content: "";
    position: absolute;
    z-index: 10;
    width: calc(50% + 11px );
    margin-left: -10px;
    height: 100%;
    background: grey;
    top: 0;
}

.row {
    position: relative;
    z-index: 20;
    width: 50%; /* this really doesn't change anything */
    max-height: 290px;
    /* FLEX BOX START */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    align-content: flex-start;
    -ms-flex-line-pack: start;
}

.child {
    width: 100px;
    height: 100px;
    background: red;   
}

.child:hover {
    background: cyan;
}