JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col narrow stack">
        <div>img goes here...</div>
        <div>img goes here...</div>
    </div>
    <div class="col large">img goes here...</div>
    <div class="col narrow">img goes here...</div>
</div>

<div class="row">
    <div class="col narrow">img goes here...</div>
    <div class="col large">img goes here...</div>
    <div class="col narrow stack">
        <div>img goes here...</div>
        <div>img goes here...</div>
    </div>
</div>

CSS

.row,
.col,
.stack > div {
    /* 
      I usually just apply 
      this to all elements using 
      the * selector. You might not
      want to, so I put it here 
     */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after {
    content:"";
    display: table;
    clear: both;
}

.col {
    float: left
}

.col.narrow {
    width: 25%;
}

.col.large {
    width: 50%;
}

.stack > div {
    height: 50%;
}











/*irrelevant*/
.col {  height: 550px; }
.col, .stack > div { border: 1px solid black }