JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    
<div id="maincontainer">


<div id="contentwrapper">
    <div id="contentcolumn">content
    </div>
</div>
<div id="leftcolumn">
PICTURE
</div>

<div id="footer">PADDING HERE</div>

</div>
    
    
</body>

CSS

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 800px;     /*Width of main container*/
margin: 0 auto;   /*Center container on page*/
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
    margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}