JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="spacer"></div>
<main>

  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit enim magni nobis expedita assumenda sapiente quam animi, rem eaque praesentium. Repellendus tenetur cumque reprehenderit hic exercitationem odio laborum magnam consequuntur!</div>
  <div>Voluptates accusamus maxime nisi. Corrupti praesentium possimus dolorum, alias eum dicta nostrum maiores dolorem vel! Sunt debitis, unde facilis nemo quisquam beatae cupiditate mollitia quasi, doloribus placeat harum quae eius.</div>
  <div>Officia, culpa! Dolorem quam ullam libero deleniti, in asperiores sint, ex vero commodi est exercitationem nemo. Magnam maiores aut, ipsam est? Libero minus, ullam nam expedita veniam veritatis recusandae deserunt.</div>
</main>
<div class="spacer second"></div>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
}

main {
  margin: auto;
  flex: 1 1 30em;
  background: #f9f9f9;
  padding: 0 0.5em;
}

.spacer {
  flex: 0 5 5em;
  margin-right: auto;
  height: 100%;
  background: #c9c9c9;
}

.spacer.second {
  flex: 4 3 5em;
}