JSFiddle - React, Tailwind, and code Playground

by Jeremy Gillick

HTML

<div class="page-content">
  <p>
    Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
  </p><p>
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
  </p><p>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.
  </p>
</div>

<div class="modal">
  <header>Yo Modal</header>
  <div class="content">
    <div class="left">
      Hello World
    </div>
    <div class="right">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum vitae nunc vel porta. Fusce felis nisl, auctor eget pulvinar at, consequat eget neque. Aliquam venenatis lorem sed massa suscipit congue. Nunc varius nisi non nisi volutpat, vel tristique arcu malesuada. Suspendisse ornare lobortis metus pretium luctus. Curabitur scelerisque magna orci, eu tempus sem rutrum at. Vestibulum posuere egestas ligula ut hendrerit. Nam at pellentesque justo. Proin non consequat odio, quis tincidunt lacus.
    </div>
  </div>
</div>

CSS

body {
  background: #ddd;
}
.modal {
  width:80%;
  max-width: 600px;
  overflow: hidden;
  background: #fff;
  height: 80%;
  min-height: 100px;
  max-height: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  
  .content {
    overflow: hidden;
    height: 100%;
  }
  .left {
    float: left;
    width:30%;
  }
  .right {
    float: left;
    width: 70%;
    height: 100%;
    overflow: auto;
  }
}