JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<header></header>
<article class='flex-wrapper'>
  <div class='main flex-one'></div>
  <div class='sidebar'></div>
</article>

CSS

* { margin: 0; padding: 0; }
header {
  position: fixed;
  height: 20px;
  background: red;
  width: 100%;
}
article {
  padding-top: 20px; /* header height + 10px */
  background: yellow;
  height: 100vh;
}

article .sidebar {
  position: fixed;
  right: 0;
  top: 20px;
  width: 200px;
  background: green;
  height: 100vh;
}

article .main {
  padding-right: 220px; /* sidebar +20px */
  background: blue;
}

.flex-wrapper {
  display: flex;
}
.flex-wrapper .flex-one {
  flex: 1;
}