JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rgContainer fat100">

    <div class="rgRow">
        <div class="rgCol boxCol box6" style="background-color:pink">
            
            <div>
                BOX1
            </div>

        </div>

        <div class="rgCol boxCol box6" style="background-color:lightgray">
<div class="spacer"></div>



            <div class="bc">

                <div class="bbl">
                    <div class="lbl">
                        a lot more text than in the other blob. The quick brown fox jumped over the lazy dog
                    </div>
                </div>

            </div>
        </div>

        <div class="rgCol boxCol box6" style="background-color:maroon">
<div class="spacer"></div>

            <div class="bc">
            
                <div class="bbl">
                    <div class="lbl">One liner</div>
                </div>
            </div>
        
        </div>

        <div class="rgCol boxCol box6" style="background-color:yellow">
            
            <div>
                BOX4
            </div>

        </div>

    </div>

</div>

CSS

.rgRow
{
    width:100%;
}

.rgCol                          { display: block;
                                  float:left;
                                  margin-left: 0%; 
}

.boxCol                            { display: block;
                                  float:left;
                                  margin-left: 0%; 
                                  height:0px;
                                  overflow:hidden;
}
.box6                         { width:    25.0000%    ; padding-bottom:    25.0000%    ; }    
.bc 
{
    position:relative;
}
.bbl
{
    overflow:hidden;
    width: 40%; /* these two 40% make it square */
    padding-bottom: 40%;

    /* positioning */
    position: relative;
    left: 30%;
    top: 2%;

    /* other */
    background-color: blanchedalmond;
}
.bbl:first-child { margin-left: 0; } /* boxCol - all browsers except IE6 and lower */
.bbl .lbl{
    position:absolute; 
    width:100%;
    padding-top:20%; 
    text-align:center;
}
.spacer {width:100%;padding-bottom:30%;display:block; }