JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left-column clearfix">
    <div class="div-small">div</div>
    <div class="div-small">div</div>
    <div class="div-small">div</div>
    <div class="div-small">div</div>
</div>

<div class="right-column clearfix">
    <div class="big-div">Big div</div>
        <div class="right-column-footer clearfix">
            <div class="div-small">div</div>
            <div class="div-small">div</div>
            <div class="div-small">div</div>
         </div> 
</div>

CSS

body {
    width: 450px;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.left-column {
    float: left;
    width: 110px;
}

.right-column {
    float: right;
    width: 320px;
}

.right-column-footer .div-small {
    float: left;
    width: 100px;
    margin-right: 10px;
}

.right-column-footer .div-small:last-child {
     margin-right:0;
   
}

.div-small {
    width: 100px;
    height: 30px;
    outline: 1px solid;
    margin-bottom: 10px;
}

.big-div {
    width: 100%;
    height: 108px;
    border: 1px solid;
    margin-bottom: 10px;
}