JSFiddle - React, Tailwind, and code Playground

by [Twiner]

HTML

<div id="wrapper">
    <div id="div0">x</div>
    <div id="div1">d</div>
    <div id="div2">next to each other.</div>
</div>

CSS

body{   
    margin:0 auto; 
    height: 100%;
    
}
#wrapper {
    display: flex;
    flex-flow: row-reverse wrap;
    background-color: blue;
    
}
#div0 {
    display: inline-block;
    width: 100%;
    height: 20%;
    background-color: green;
}


#div1 {
    display: inline-block;
    width: 20%;
    height: 100%;
    float: left;
    flex: 0 1 40px;
    background-color: red;
}

#div2 {
    
    vertical-align: top;
    display: inline-block;
    width: 80%;
    height: 100%;
    float: right;
    background-color: yellow;
}