JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="webbody">
       <div class="topHeader"></div>   
       <div id="main1" class="dynamic"></div>
       <div class="sidebar"></div>
       <div class="footer1"></div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
}
.webbody {
    margin: 0 auto;
    padding:0;
    width:900px;
    height:200px;
    max-height:2000px;
}
.topHeader {
    width:900px;
    height:50px;
    margin: 0 auto;
    padding:0;
    background:purple;
}

.dynamic {
    width:650px;
    height:400px;
    float:left;
}

.sidebar {
    margin-left:50px; 
    width:150px;
    height:400px;
    float:left;
    background:red;
}
.footer1 {
    float:left;
    margin: 0 auto;
    padding:0;
    width:900px;
    height:20px;
    background:lime;       
}

.slot { 
    border: 1px solid black;
    min-height: 150px;
}

#main1 {
 height: auto;   
}

JavaScript

//this function only loads the dynamic part of the page
    function load() {
        var main = document.getElementById("main1");
        var CHANGEME = 5;

        for (var i = 0; i < CHANGEME; i++) {
            var slot = document.createElement("div");
            slot.className = "slot";
            main.appendChild(slot);
        }
    }
    load();