JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div class="grid">
  <div class="col1">
    Col1
  </div>
  
  <div class="col2">Col2</div>
</div>

CSS

html, body {
  height: 100vh;
}

body:after {
  content: "";
  display: block;
  background-color: #ddd;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100vw - 50%);
  height: 100vh;
  z-index: -1;
}

.grid {
  display: grid;
  grid-template-areas: "left right";
  grid-gap: 10px;
  max-width: 600px;
  margin: 0 auto;
  height: 100vh;
  padding: 20px;
  border: solid 1px red;
}

.col1 {
  grid-area: left;
  border: solid 1px green;
}

.col2 {
  grid-area: right;
  border: solid 1px green;
}