JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="head"><div class="text">header</div></div>
    <div id="navi"><div class="text">navi</div></div>
    <div id="body">
        <div id="body-in">
            <div id="main">main</div>
            <div id="sidebar">sidebar</div>
        </div>
    </div>
</div>
<div id="footer"><div class="text">footer</div></div>

CSS

#body {
    width: 100%;
}
/*サンプル設定*/
#container, #head, #navi ,#main, #sidebar, #footer{
    border: 1px solid #ddd;
}

#head {
    height: 50px;
    background-color: #f00;
    
}
#navi {
    height: 20px;
    background-color: #0f0;
}
.text {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    width: 100%;
    text-align: center;
    color: #fff;
}

#main .text { color: #000; }

#main {
    background-color: #fff;
}
#sidebar {
    background-color: #999;
}

#container {
    
}

#footer {
    height: 50px;
    background-color: #00f;
}

/*ここからflex-box設定*/
#body-in{
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
        width: 100%; /*#mainと#sidebarの幅の合計*/
}

#main {
    flex: 1 250px;
    height: 350px;
    order: 2;
}

#sidebar {
    flex: 1 auto;   
}