JSFiddle - React, Tailwind, and code Playground

by Steve Valet

HTML

<div class="flex-container">
  <div class="flex-item">
  
    <div class="flex-nested-container">
    
      <div class="flex-item-nested">
          <img class="flex-image" src="https://goo.gl/omeEi4"/>
      </div>
      <div class="flex-item-nested">  
          <div>
           <div><strong>This</strong></div>
           <div>Align</div>
           <div>Middle</div>
          </div>
      </div>    
      <div class="flex-item-nested">
        Align Bottom
      </div> 
    </div>
    
 
  </div>
  <div class="flex-item">
    Ignore this box
  </div>
</div>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.flex-item {
  background-color: #feac31;
  padding: 5px;
  min-width: 23rem;
  min-height: 8rem;
  margin-top: 10px;
  border: 4px solid white;
  /*line-height: 150px; */
  color: white;
  text-align: center;
}

.flex-nested-container{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center; 
}
.flex-item-nested{
  width:30%;
  min-height: 8rem;
  background-color: white;
  padding: 5px;
  border: 1px solid black;
  color: black;
  text-align: center;   
}

.flex-image{
  max-width: 80px;
  max-height: 80px;
  padding: 26px 0;
}
.flex-item-nested:nth-child(2) {

    vertical-align: middle;
    text-align: left;   
}
.flex-item-nested:nth-child(3) {
    vertical-align: bottom;
}