JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head></head>
<body>

   
        
        <div id="filler">
            filler width = logo width
        </div>
    </div>
    
    <div id="div_1">
        <div id="logo"><img src="http://www.google.com/logos/2012/mothersday12-res.png"></div>
        1
    </div>
    
    <div id="div_2">
        2
    </div>

</body>
</html>

CSS

*{margin: 0; padding: 0;}

body{color: #fff;}

#logo{
    position: absolute;
    top: 0;
    width: 150px; height: 50px;
}

#wrapper{
    min-width: 350px;
}

#filler{
    width: 150px; height: 50px;

    background-color: #000;
    opacity: 0.3;
}

#div_3{
    float: right;
    width: 200px; height: 50px;
    
    background-color: red;
}

#div_1{
    margin: 0 auto;
    width: 300px; min-height: 200px;
    
    background-color: green;
}

#div_2{
    width: 100%; height: 50px;
    
    background-color: blue;
}