How to align a div at the bottom of another which use flex box?

Viewed 2646

I need to place the orange button align at the bottom of the blue one. With my current flex code I cannot get the result wanted. Any ideas how to fix it? Thanks

.content {
  width: 350px;
  height: 150px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.row1 {
  background-color: red;
}

.row2 {
  background-color: blue;
  height: 100px
}

.icon {
  width: 50px;
  height: 50px;
  background-color: orange;
  align-items: center;
  justify-content: center;
}
<div class="content">
  <div class="row1">
  </div>
  <div class="row2">
    <div class="icon">

    </div>
  </div>
</div>

3 Answers
Related