JSFiddle - React, Tailwind, and code Playground

HTML

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <!--
  <div class="l-notification"></div>
  <div class="l-primary-bar"></div>
  -->
  <div class="l-content">content</div>
</div>

CSS

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto minmax(1px, 1fr);
  /*  // 1px is needed because of https://stackoverflow.com/questions/49558290/container-scrolls-to-top-when-children-element-height-changes */
  grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

.l-sidebar {
  grid-area: sidebar;
  padding-right: 10px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
}

.l-content {
  grid-area: content;
}