JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

<div class="column1">
This is column 1
</div>
<div class="column2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel sagittis tortor. Vestibulum posuere, massa a varius laoreet, sapien ligula venenatis lacus, at molestie velit metus a quam. Sed vel condimentum lectus. Duis id augue in tortor ullamcorper condimentum. Quisque non felis ultricies, consequat lacus eu, ornare tortor. Vivamus quis elit purus. Nulla accumsan ultrices est rhoncus egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel sagittis tortor. Vestibulum posuere, massa a varius laoreet, sapien ligula venenatis lacus, at molestie velit metus a quam. Sed vel condimentum lectus. Duis id augue in tortor ullamcorper condimentum. Quisque non felis ultricies, consequat lacus eu, ornare tortor. Vivamus quis elit purus. Nulla accumsan ultrices est rhoncus egestas. 
</div>

</div>
<footer>this is the footer</footer>

CSS

.column1 {
  background: red;
  color: #fff;
  float: left;
  height: 100%;
  margin-bottom: -9000px;
  padding: 10px;
  padding-bottom: 9050px;
  width: 20%;
}

.column2 {
  float: left;
  height: 100%;
  padding: 10px;
  width: 70%;
}

.container {
  clear: both;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
footer {
  background: blue;
  color: #fff;
  height: 100px;
  padding: 10px;
  text-align: center;
}