JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">
  
  <div class="item a"></div>
  <div class="item b"></div>
  <div class="item c"></div>
  
</div>

CSS

#bg {
  
  height: 500px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  
}


.item {
  
  width: 300px;
/*   height: 300px; */
  padding: 50px;
  background-color: lightgreen;
  margin-left: 10px;
  
  
}


.a {
  
  align-self: stretch;
  
}


.b {
  
  align-self: stretch;
  
}