JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">
    <div class="header">header</div>
    <div class="main">
      <div class="w100">
        main sdgfsd gfsdgsdgfs ssdgsdgfsd
      </div>
    </div>
    <div class="footer">footer</div>
  </div>
</div>

CSS

.container {
  display: inline-flex;
  width:0px;
  border:0;
  padding:0
}

.footer,
.header {
  background: green;}

.content {}

.sidebar {
  flex: 0 0 200px;
  width:1px;
  background: blue;
}

.main {
  background: yellow;
}

.w100 {
  width: 100px;
}