<div class="content">
<div class="wrap wrap-1">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
<div class="wrap wrap-2">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
</div>
.wrap {
display: flex;
background-color: yellow;
width: 100px;
flex-wrap: wrap;
min-height: 100%;
align-items: flex-start;
}
.content {
display: flex;
}
.wrap-2 .item-2 {
height: 100px;
}
.item {
height: 10px;
width: 100px;
}
.item:nth-of-type(1) {
background-color: red;
}
.item:nth-of-type(2) {
background-color: green;
}
.item:nth-of-type(3) {
background-color: blue;
align-self: flex-end;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.