<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: stretch
}
.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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.