JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
</ul>

CSS

ul li:not(.year):nth-of-type(4n+1) { clear: right; background: yellow; }
ul li:not(.year):nth-of-type(4n+2) { clear: left; background: green; }
li { float: left; }