JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="left_wrapper">
    <div id="left">
        <div id="topleft"></div>
        <div id="bottomleft"></div>
    </div>
</div>
    <div id="right">
        <div id="topright"></div>
        <div id="bottomright"></div>
    </div>
</div>

CSS

body {
    background: #F4F4F4;
    padding: 0px;
}

#wrapper:after{
  content:".";
  display:block;
  clear:left;
    visibility:hidden;
}

   
    #wrapper {
    background: #FFFFFF;
    width: 750px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #b3b3b3;
    border-top: none;
    margin-top: 0px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    
}

#left {
    width: 175px;
    height: 100%;
    border: 1px solid #b3b3b3;
}


#topleft {
    width: 175px;
    height: 175px;
    border: 1px solid #b3b3b3;
}


#vr{
    height: 200px;
    width:1px;
    border: 0;
    background-color: #b3b3b3;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

#right {
    width: 550px;
    height: 100%;
    border: 1px solid #b3b3b3;
    float:left;
}

#topright {
    width: 550px;
    height: 50px;
    border: 1px solid #b3b3b3;
}

#left_wrapper{
    margin-right:5px;
    padding-right: 5px;
    border-right:1px solid red;
    float:left;
}