JSFiddle - React, Tailwind, and code Playground

by kdani3

HTML

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

CSS

div.c
{
    width: 100%;
}

div.c>div
{
    height: 36px;
}

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;
}

div.tall
{
    border-top: 1px solid black;
    height: 120px !important;
    color: red;
}