JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="header">
    <div id="header-e3">
        3 also
    </div>    
    <div id="header-e2">
        2 has some width
    </div>
    <div id="header-e1">
        1 conforms
    </div>
</div>
<div id="nav">
    links
</div>
<div id="content">
    content
</div>
<div id="footer">
    footer
</div>
</div>

CSS

#wrapper
    {
        width: 95%;
        margin: 20px auto;
        border: 1px solid black;
    }

    #header
    {
        margin: 5px;
    }
    #header-e1
    {
        overflow: hidden;
        border: 1px solid black;
    }
    #header-e2
    {
        float: right;
        border: 1px solid black;
    }
    #header-e3
    {
        float: right;
        border: 1px solid black;
    }

    #nav
    {
        margin: 5px;
    }
    #content
    {
        margin: 5px;
    }
    #footer
    {
        margin: 5px;
    }