how to make divs occupy the empty space next to the largest div

I need the red divs to be on two lines next to the blue block, without this blank space, but I can't do it at all.

<ol class="products list items product-items">
 <li class="item product product-item"></li>
 <li class="item product product-item"></li>
<div class="category-listing"><img></img></div>
 <li class="item product product-item"></li>
 <li class="item product product-item"></li>
 <li class="item product product-item"></li>
 <li class="item product product-item"></li>
</ol>


.products.list.items.product-items{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.product-item {
 width: 23.5%;
}

.category-listing {
position: relative;
}

.category-listing img {
object-fit: cover; 
width: 608px;
}

img example