JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesnt size like the next one
        </div>
     </div>
     
     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesnt scale to the other block regardless of text inside of it
        </div>
     </div>

</div>

CSS

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;
    
    float:left;
    position:relative;
    
    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;
    
    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }