JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mostRead">
	<li class="mostRead 1">
		<a href="#">
        	<div class="ranking-image-container">
		        <span class="ranking">1</span>
                     <img src="http://lorempixel.com/100/60/" />
	        </div>
	        <div class="copy-container">
	            <span class="mostReadTitle">
		            <h4 class="title">Title 1</h4>
                </span>
	        </div>
</a>
</li>
    
    <li class="mostRead 1">
		<a href="#">
        	<div class="ranking-image-container">
		        <span class="ranking">2</span>
                    <img src="http://lorempixel.com/100/60/" />
	        </div>
	        <div class="copy-container">
	            <span class="mostReadTitle">
		            <h4 class="title">Title 2</h4>
                </span>
	        </div>
</a>
</li>
    
</ul>

CSS

ul.mostRead {}
li.mostRead {float:left;}
.ranking-image-container {}
span.ranking {}
span.ranking img {}
.copy-container {}
span.mostReadTitle {}