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>
<!-- display:table and display:table-cell method -->
        <div class="rgCol boxCol box6" style="background-color:lightgray">
            <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>

<!-- display:table and display:table-cell method, short text -->
        <div class="rgCol boxCol box6" style="background-color:maroon">
            <div class="bc">
            
                <div class="bbl">
                    <div class="lbl">One liner</div>
                </div>
            </div>
        
        </div>

<!-- line-height method -->
        <div class="rgCol boxCol box6" style="background-color:yellow">
          <div class="bc" style="background-color: #e0e0e0;">
            <div id="line-h-outter">
              <span id="line-h-inner">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</span>
            </div>
          </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  { position: relative; width:    25.0000%    ; padding-bottom:    25.0000%    ; }    
.bc  {
    position:absolute;
    top: 30%;
    bottom: 30%;
    left: 30%;
    right: 30%;
    overflow: hidden;
}
.bbl {
    display: table;
    height: 500px;
    padding-top: 50%;
    margin-top: -250px;
    background-color: blanchedalmond;
    width: 100%;
}
.bbl:first-child { margin-left: 0; } /* boxCol - all browsers except IE6 and lower */

.bbl .lbl {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}
#line-h-outter {
  line-height: 500px;
  vertical-align: middle;
  margin-top: -250px;
  padding-top: 50%;
}
#line-h-inner {
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}