JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>

CSS

#div1 { 
    display: block; 
    float: left; 
    overflow: hidden; 
    width: 10%; 
    height:40px;
    border:1px dotted #000;
}  
#div2 { 
    float: left; 
    margin-top: 0; 
    width: 40%; 
    border:1px dotted #000;
} 
#div3{ 
    display: block; 
    float: left; 
    overflow: hidden; 
    width: 45%; 
    border:1px dotted #000;
} 

#div4{  
    display: block; 
    overflow: hidden; 
    text-align: center; 
    width: 85%; 
    border:2px dotted #000;
}