JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="container">
    <div class="side">
    
  </div>
  <div class="content">
    <div class="content_inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper, nulla id tincidunt commodo, risus leo pulvinar justo, eget vehicula felis ex vel tellus. Aliquam erat volutpat. Etiam sapien velit, gravida mattis elit at, fringilla aliquet massa. Integer a metus ullamcorper, ornare lectus id, auctor magna. Etiam semper arcu quis ipsum faucibus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc cursus euismod nisl ut sagittis. Proin elit metus, volutpat in velit eget, fringilla facilisis nunc. Proin ligula nulla, lobortis ac mi ac, tempor molestie lectus. Sed ipsum tellus, rutrum imperdiet eleifend a, dignissim nec lacus. In hac habitasse platea dictumst. Aenean cursus sapien quis enim faucibus, semper tincidunt justo pellentesque.
    </div>
  </div>
</div>

SCSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: lightGrey;
}

.container {
  height: 100%;
  min-height: 100%;
  /* max-width: 400px; */ // Change to rem
  margin: auto;
  display: flex;
  /* background-color: red; */
}

.side {
  flex-basis: 30%;
  padding: 2rem;
}

.content {
  flex-basis: 70%;
  padding: 2rem;
  background-color: white;
}

.content_inner {
  max-width: 400px;
}