JSFiddle - React, Tailwind, and code Playground

by kdani3

HTML

<div class="c">
    <div>
        A
    </div>
    
    <div>
        B
    </div>
    
    <div>
        C
    </div>
    
    <div>
        D
    </div>
</div>

CSS

div.c
{
    width: 100%;
}

div.c>div:nth-child(2n-1)
{
    width: 25%;
    float: left;
    background: blue;
}

div.c>div:nth-child(2n)
{
    width: 75%;
    float: left;
    background: yellow;
}