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

Question

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>

Answer 1

You also need to set display: flex on row2 and then you can use align-self: flex-end on orange element.

.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;
  display: flex;
  height: 100px
}
.icon {
  width: 50px;
  height: 50px;
  background-color: orange;
  align-self: flex-end;
}

<div class="content">
  <div class="row1"></div>
  
  <div class="row2">
    <div class="icon"></div>
  </div>
</div>