JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
     <div id="gridtop1">
     <img src="http://scitechdaily.com/images/New-VLT-Image-of-Messier-100.jpg" />
     <p>Text here</p>
     </div>
     <div id="gridtop2">
     <img src="http://scitechdaily.com/images/New-VLT-Image-of-Messier-100.jpg" />
     <p>Text herezdjfsififbsfibsdfibsdfbsfisbdhsbdhsbdvbsvhbsvssdsd</p>
     </div>
     <div id="gridtop3">
     <img src="http://scitechdaily.com/images/New-VLT-Image-of-Messier-100.jpg" />
     <p>Text here</p>
     </div>
     <div id="gridbottom1">
     <img src="http://scitechdaily.com/images/New-VLT-Image-of-Messier-100.jpg" />
     <p>Text here</p>
     </div>
</div>

CSS

#grid {
    border: 1px #ccc solid;
    float:left; 
}

#grid div {
    float: left;
    padding: 10px;
    overflow-wrap: break-word;
}

#grid div img{
    width: 100px;
    
}