JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="leftColumn"> <a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
CSS
#wrapper {
width: 800px;
}
#leftColumn {
background-color: #FF0000;
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
background-color: yellow;
width: 100%;
}
#contentDislike, #contentLike {
display: inline-block;
width: 290px;
}
#contentDislike {
background-color: #00FF00;
}
#contentLike {
background-color: #0000FF;
}