JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thong">
  <div class="thing">
    <div class="thinger">
      <div class="thot"></div>
    </div>
    <div class="thingy">Thingy of the Things</div>
  </div>
  <div class="thang">I like all the things. So what?</div>
 </div>
 
 <div class="thong">
  <div class="thing">
    <div class="thinger">
      <div class="thot"></div>
    </div>
    <div class="thingy">Thingy of the
Things</div>
  </div>
  <div class="thang">I like all the things. So what?</div>
 </div>
 
<p>If you can get the red cube to touch the T in the first box you win!</p>

CSS

.thong {
   width: 300px;
   text-align: center;
   padding: 20px;
   background: grey;
   margin: 10px;
   float: left;
}

.thing {
  display: flex;
  padding: 0 0 20px;
  justify-content: center;
  align-items: center;
}

.thinger {
  max-width: 25%;
}

.thot {
  width: 32px;
  height: 32px;
  background: red;
}

.thingy {
  max-width: 75%;
  font-size: 32px;
  white-space: pre-wrap;
}

p {
  clear: both;
}