JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="grid">
  <div class="header">
    Hello, I love you wont you tell me your name?
  </div>
  <div class="foo">
    hello
  </div>
  <div class="bar">
    world
  </div>
</div>

CSS

body {
  margin: 0;
}
.grid {
  display: grid;
  background: yellow;
  grid-template-columns: 60fr 40fr;
  grid-template-rows: 40px auto;
  height: 98vh;
  width: 98vw;
  margin: 10px;
  grid-gap: 10px;
}

.header {
  background: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

.foo {
  background: pink;
  padding: 10px;
}

.bar {
  background: blue;
  padding: 10px;
}