JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div id="foo" style="background:red"></div>
<div id="bar" style="background:green"></div>
<div id="baz" style="background:blue"></div>
<div id="bla" style="background:yellow"></div>
<div id="buh" style="background:magenta"></div>

CSS

body { padding: 2.5%; }
div { margin: 0 2.5% 2.5%; height: 50px; }

/* Mittleres Layout */
@media screen and (min-width: 500px){
    #bar {
        float: left;
        width: 20%;
    }
    #baz {
        float: right;
        width: 70%;
    }
    #bla {
        float: left;
        clear: left;
        width: 20%;
    }
    #buh {
        clear: both;
    }
}

/* Maximal-Layout */
@media screen and (min-width: 750px){
    #baz {
        float: left;
        width: 45%;
    }
    #bla {
        float: right;
        clear: none;
        width: 20%;
    }
}