JSFiddle - React, Tailwind, and code Playground

by Hoffmeyer

HTML

<div class="outer">
    <div class="sidebar">
        <div class="sidebar-top">top of sidebar that has a long heading that should wrap</div>
        <div class="sidebar-bottom">Second element in top of sidebar</div>
    </div>
    <div class="content">
        Contents goes here.. very very long content that will not fix the page. Contents goes here.. very very long content that will not fix the page.  Contents goes here.. very very long content that will not fix the page.  Contents goes here.. very very long content that will not fix the page.
    </div>
</div>

CSS

html, body {
    height: 100%;
}
div {
    padding: 10px;
}
.outer {
    height: 100%;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-align: stretch; 
    -ms-flex-pack: start;
    width: 100%;
}

.sidebar {
    background-color: silver;
    height: 100%; 
    display: -ms-flexbox; 
    -ms-flex-positive: 0; 
    -ms-flex-negative: 0; 
    -ms-flex-preferred-size: 250px; 
    -ms-flex-direction: column; 
    -ms-flex-align: start; 
    -ms-flex-pack: start;
}

.sidebar-top{
    background-color: white;
    -ms-flex-positive: 0; 
    -ms-flex-negative: 0; 
    -ms-flex-preferred-size: auto;
}

.sidebar-bottom{
    background-color: lightgrey;
   -ms-flex-positive: 0; 
   -ms-flex-negative: 0; 
   -ms-flex-preferred-size: auto;
}

.content {
    background-color: grey;
    display: -ms-flexbox; 
    -ms-flex-positive: 1; 
    -ms-flex-negative: 0; 
    -ms-flex-preferred-size: auto; 
    -ms-flex-direction: column; 
    -ms-flex-align: stretch; 
    -ms-flex-pack: start;
}