JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style type="text/css">
html,body {
    margin: 0px 0px 0px 0px;
    height: 100%;
}

.main:after {
    content: "";
    clear: both;
    display: block;
}

.main {
    background-color: red;
    width: 400px;
    min-height: 100%;
    margin: auto;
}

.left {
    width: 100px;
    padding: 0px;
    float: left;
    height: 100%;
    background-color: blue;
}

.right {
    width: 300px;
    height: 100%;
    padding: 0px;
    float: right;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div...