<div class="flex-rows">
  <div class="flex-item">
    content 01
  </div>
  <div class="flex-item">
    content 02<br>
    content 02<br>
    content 02<br>
    content 02<br>
  </div>
  <div class="flex-item">
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
    content 03<br>
  </div>
</div>
.flex-rows{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex-item{
  width: 33.333%;
  background: #f00;
  padding: 15px;
  box-sizing:border-box;
}
.flex-item:nth-child(2){
  background: #ff0;
}
.flex-item:nth-child(3){
  background: green;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.