JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grow">
  <div class="gcolumn" style="background-color:#E3EAEA">
    <div class="gtext">
      <h2>example header</h2>
      <p>this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt this is some example etxt</p>
    </div>
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
  <div class="gcolumn" style="background-color:#bbb;">
    <img src="https://photo.mybuilder.com/2_thumb/4496591_fca4d53347.jpg" />
  </div>
</div>

CSS

.gcolumn {
  float: left;
  width: 33.33%;
  height: auto;
  display: table-cell;
  overflow: hidden;
  z-index: 1;
  
  
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.gtext{
  text-align: center;
  
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  right: 0;
  top: 0;
}

.grow {
  display: table;
  overflow: hidden; 
  
}

.gcolumn img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}


@media screen and (max-width: 700px) {
    .gcolumn {
        width: 100%;
        
    }
}