JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blog-feeder">
        	<div class="article-preview grid">
        		
        	</div>
        	<div class="article-preview grid">
        		
        	</div>
        	<div class="article-preview grid">
        		
        	</div>
        	<div class="article-preview grid post_VIDEO">
        		
        	</div>

        	<div class="article-preview grid">
        		
        	</div>

        	<div class="article-preview grid">
        		
        	</div>
        	<div class="article-preview grid">
        		
        	</div>
        </div>

CSS

.blog-feeder {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .article-preview.grid {
            flex-grow: 1;
            flex-basis: 25%;
            width: auto;
            margin-right: 15px;
            
            background: blue;
            height: 300px;
        }

        .article-preview.grid.post_VIDEO {
            flex-basis: 50%;
            background: green;
        }