JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<div>
  <section>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
  </section>
    <section class="second">
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
  </section>
    <section class="third">
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>    <p>C1C1C1C1C1C1C1C1C1C1C1</p>
  </section>
</div>

CSS

section {
  position: absolute;
  width: 33%;
  top: 0;
  right: 0;
}

section:nth-child(1){
  position: relative;
}

.second {
  right: 33%;
  color: red;
}

.third {
  color: green;
}

div {
  outline: 2px solid black;
  height: min-content;
  display: relative;
}