JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left-ad">
    <div id="sidebar"> <a href="#"><img src="sidewall.png" alt="LEft Banner" ></a>

    </div>
</div>
<div class="right-ad"> <a href="#"><img src="wad.jpg" alt="Right Banner" style="border-width: 0px" ></a>

</div>
<div class=wrapper>//center body part</div>

CSS

#left-ad {
    position:absolute;
    left:0;
    position: fixed;
    width:100px;
    height:100%;
    background-color:red;
    margin:auto 0;
}
#sidebar {
    margin:auto 0;
    background-color:green;
    height:200px;
}
.right-ad {
    right:0;
    position: fixed;
    position:absolute;
    width:100px;
    height:300px;
    background-color:red;
}
.wrapper {
    width:200px;
    margin:0 auto;
    background-color:blue;
    height:150px;
    line-height:150px;
    text-align:center;
}