JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottomContainers" role="moreInfo">
     <div class="container" id="firstContainer">
        <img src="http://www.placehold.it/100x100">
        <p>
          Some random text is in this block, It doesnt size like the next one
        </p>
     </div>
     <div class="container" id="firstContainer">
       <img src="http://www.placehold.it/100x100">
       <p>
         this is another block which also doesnt scale to the other block regardless of text inside of it
       </p>
     </div>
 </div>

CSS

.container img {
    display: block;
    margin: 10px auto 0px;
}
 /**********Small Containers*************/
  .container{
    overflow: hidden;
    width: 30%;
    height: 200px;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
    display: block;
    float: left;
 }