JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="cont">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b3">3</div>
</div>

CSS

*{box-sizing:border-box};
.cont{
    width:400px;
    margin:auto;
    
}
.b1, .b3{
    width:50%;
    float:left;
    border:1px solid #333;
    height:100px;
}
.b2{
    border:1px solid #333;
    height:100px;
    width:100%;
    clear:left;
}
.b3{
    margin-top:-200px;
    margin-left:50%;
}
@media (min-width:500px){
    .b1, .b2, .b3{
        float:left;
        width:30%;
        height:100px;
        border:1px solid #333;
        clear:none;
        margin:0;
    }
}