JSFiddle - React, Tailwind, and code Playground

by Jorge Polanco

HTML

<div class="container">

  <div class="left-column">

  </div>

  <div class="right-column">
    <h1>Hello Kitty!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
  </div>

</div>

CSS

.container {
  float: left;
  width: 100%;
  background-color: black;
  position: relative;
  left: 0;
}

.container:before,
.container:after {
  content: " ";
  display: table;
}

.container:after {
  clear: both;
}

.left-column {
  float: left;
  width: 30%;
  height: 100%;
  position: absolute;
  background: wheat;
}

.right-column {
  float: right;
  width: 70%;
  position: relative;
  padding: 0;
  margin: 0;
  background: rebeccapurple;            
}