JSFiddle - React, Tailwind, and code Playground

HTML

<img class="sidebar" src="http://dummyimage.com/123x340">
<img class="nav" src="http://dummyimage.com/340x123">
<div class="break">Dummy</div>

<ul>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
<li><h4>This is awesome</h4>
<img src="http://dummyimage.com/50x50" /></li>
...
</ul>

CSS

img.nav {float: right;}
img.sidebar {float:left;}
div.break {clear: right;}
img.i1 {display:inline; padding: 5px;}

li {
    width: 75px;
    min-height: 75px;
    border: 1px solid #000;
    display: inline-block;
    margin: 5px;
}