JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Holy Grail of Layouts: Example #3: A List Apart</title>
    </head>
    <body>
        <div id="fixed">
            <div id="header">This is the header.</div>
            <div id="left" class="column">
                <h2>This is the left sidebar.</h2>
                <p>Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text.</p>
            </div>
    
            <div id="right" class="column">
                <h2>This is the right sidebar.</h2>
                <p>Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text 
                Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text...

CSS

#fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

#center {
    margin-top: 32px; /* Header height */
    padding: 10px 20px; /* CC padding */
    box-sizing: border-box;
    border-left: 200px solid black; /* LC width including padding */
    border-right: 150px solid black; /* RC width including padding */
}

#left {
    width: 180px; /* LC width */
    padding: 0 10px; /* LC padding */
    float: left;
}

#right {
    width: 130px; /* RC width */
    padding: 0 10px; /* RC padding */
    float: right;
}

#footer {
    position: relative;
    z-index: 1;
}


/*** Just for looks ***/

body {
    margin: 0;
    padding: 0;
    background: #FFF;
}

#header, #footer {
    font-size: large;
    text-align: center;
    padding: 0.3em 0;
    background: #999;
}

#container .column {
    padding-top: 1em;
    text-align: justify;
}

#left { background: #66F }

#center { background: #DDD }

#right { background: #F66 }