JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="header-inner">Header</div>
</header>
<div id="outer">
    <div id="col1" class="col">
        <p>Start</p>
        <p>Col1</p>
        <p>End</p>
    </div>
    <div id="col2" class="col">
        <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>End</p>
    </div>
</div>

CSS

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