JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="nav">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, sapiente.</div>
<div class="grid">
  <div class="col-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto et dolorum, sint, porro consequatur voluptatem asperiores molestiae dolores nisi excepturi, quos neque quae! Culpa facilis deleniti ratione dicta temporibus, repellendus eligendi saepe ipsam odit! Modi numquam ipsum voluptatibus sapiente magni dolores sunt quaerat culpa libero dolore, nulla. Laborum optio, rem.
  </div>
  <div class="col-2">
    <div class="sidebar">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur inventore explicabo ipsa esse perferendis velit recusandae commodi maxime maiores. Debitis cum accusamus ratione beatae soluta.
    </div>
  </div>
</div>

CSS

body {
  font-family: Helvetica;
}

.nav {
  padding: 1rem 2rem;
  background-color: tomato;
  color: white
}

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "col1 col2";
  background-color: rebeccapurple;
}

.col-1 {
  grid-area: col1;
  background-color: silver;
  padding: 1rem;
  font-size: 2.5rem;
  padding-right: 1fr;
}

.col-2 {
  grid-area: col2;
  background-color: coral;
}

.sidebar {
  background-color: #fafafa;
  padding: 1rem;
  position: sticky;
  top: 0;
}