JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='horses'>


<div class='horselist'>
<div class='cell'>
	<img src="https://s3.amazonaws.com/creation.howrse.com/100145104-icone.png" class="image50">
	</div>
	<div class="cell">Naaaaaaaaaaaame<br>tiiiiiiiitleeeeeeeeeeeee
	</div>
	<div class="cell"><img src='' class='image30'></div>
</div>

<div class='horselist'>
<div class='cell'>
	<img src="https://s3.amazonaws.com/creation.howrse.com/100145104-icone.png" class="image50">
	</div>
	<div class="cell">Naaaaaaaaaaaame<br>tiiiiiiiit leeee eeeee eeee
	</div>
	<div class="cell"><img src='' class='image30'></div>
</div>

<div class='horselist'>
<div class='cell'>
	<img src="https://s3.amazonaws.com/creation.howrse.com/100145104-icone.png" class="image50">
	</div>
	<div class="cell">Naaaaaaaaaaaame<br>tiiiiiiiitleeeeuuueeeeeeee
	</div>
	<div class="cell"><img src='' class='image30'></div>
</div>

<div class='horselist'>
<div class='cell'>
	<img src="https://s3.amazonaws.com/creation.howrse.com/100145104-icone.png" class="image50">
	</div>
	<div class="cell">Naaaaaaaaaaaame<br>tiiiiiiiitleeeeeeeeeeeee
	</div>
	<div class="cell"><img src='' class='image30'></div>
</div>

</div>

CSS

.horses {display:flex;flex-flow:row wrap;justify-content:center;}
.horselist {height:50px;width:300px;border:1px dotted blue;display:flex;justify-content:space-between;padding:5px;}
.cell {border:1px dotted red;}
.image50 {width:50px;height:50px;}
.image30 {width:30px;height:30px;}