JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-inner">Header</div>
<div id="outer">
    <div class="col1">
        <p>Start</p>
        <p>Col1</p>
        <p>End</p>
    </div>
    <div class="col2">
        <p>Start</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>Col2</p>
        <p>End</p>
    </div>
</div>

CSS

html, body {
    height: 100%;
}
#outer {
    min-height: 100%;
    background-color: red;
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.col1 {
    background-color: green;
    width: 220px;
    float: left;
    min-height: 100%;
    height: 100%;
    margin-right: 10px;
}
.col2 {
    background-color: aliceblue;
    width: 770px;
    float: left;
    min-height: 100%;
}
.header-inner {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: orange;
}