JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
  </div>
  <div class="footer">footer</div>
</div>

CSS

div{
  padding:2px;
  border:1px solid;
}
.container {
  display:inline-flex;
  flex-flow:row wrap;
}
.footer,.header{
  flex: 0 0 100%;
}
.content{
  max-width:100%;
  display: flex;
  flex: 0 0 100%;
  justify-content: stretch;
}
.sidebar{
  flex:0 0 300px;
}
.main{
  flex: 1 1 auto;
}