JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div id="crackers1">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8q3x_pFvnepIe7b7C_YeHbbHJe4n1KXKPIgldpccJY1hw3Z8z" alt="missing" height="100%" width="100%" />
  <span>Peppermint Thins</span>
  </div>
   <div id="crackers2">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTdNkStSLeNk_3eAN6MV7asaOQapylITCIxs1JDOEblIc8V4eqy" alt="missing" height="100%" width="100%" />
  <span>Ritz Crackers</span>
   </div>
<div style="clear:both;"></div>
</div>

CSS

#crackers1 {
    float:left;
    width:48%;
    vertical-align: top;
}
#crackers2 {
    float:right;
    width:48%;
    vertical-align: top;
}