JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left col">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

<div class="mid col">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
</div>

<div class="right col">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

<div class="clear"></div>

CSS

div {
    border: 1px solid #c3c3c3;   
}

.col {
    float: left;   
}

.left {
    width: 75px;
    height: 300px;
}

.mid {
    width: 125px;
    height: 300px;
}

.right {
    width: 200px;
    height: 300px;
}
.row {
    height: 58px;   
}
.top {
    height: 118px;   
}
.bottom {
    height: 178px;   
}

.clear {
    border: 0px;
    clear: both;   
}