JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
<div id="header">
header
</div>
    
<div id="content">
<div id="maincontent">
main content
</div>
<div id="stickystuff">
sticky stuff
</div>
</div>
    
<div id="footer">
footer
</div>
    
    
</div>

CSS

#wrapper{height:800px; position:relative; background-color:red}
div#header {
    top:0;
    height: 50px;
    position:absolute;
    width:100%;
    background: rgba(10,10,10,0.8);
    margin: -10px 0px 0px -10px;
    colour: white; position:relative
}

div#maincontent {
    display: inline-block; float:left;
    left:1%;
    right: 29%;
    min-width: 550px;
    width:65%;
    position:absolute;
    left:1%;
    right: 39%;
    top: 60px;
    min-height: 400px;
    border-radius: 5px;
    background: blue;
}
div#stickystuff {
    display: inline-block;
    position:fixed;
    right: 0.3%;
    left:67%;
    top: 60px;;
    bottom: 0.5%;
    min-width: 300px;
    width: 32%;
    float: left;
    line-height:200%;
    margin-left:10px;
    background: yellow;
}

div#footer {
    color: white;
    background: rgba(68, 68, 68, 0.8);
    width: 100%;
    position:absolute;
    bottom:0; right:0
}