JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div id="header">
    <div id="logo">Logo</div>
    <div id="status">Status</div>
    <div id="toolbar">Toolbar</div>
</div>
<div id="container">
    <div id="sidebar-menu">Sidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar MenuSidebar Menu</div>
    <div id="content">Main ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain Content</div>  
</div>

CSS

* {
    /* force standard box model */
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
body {
    /* Reset */
    margin:0;
    padding:0
}
div {
    /* just to show the boxes */
    border:1px solid blue
}

#header {
    position:fixed;
    height:50px;
    top:0;
    width:100%;
    background:#fff
}
#logo {
    float:left
}
#status {
    width:247px;
    margin:10px auto;
}
#toolbar {
    bottom: 0;
    position: absolute;
    right: 0;
}
#container {
    margin-top:50px
}
#sidebar-menu {
    width:20%;
    min-width:100px;
    float:left
}
#conent {
    width:80%;
    float:left
}