Left, center, and right align divs on bottom of same line

Question

I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I\'d like to left-align one

Answer 1

You can use align-items: flex-end to make the flexbox items aligned vertically at the bottom.

.container {
  display: flex;
  height: 300px;
  min-width: 400px;
  background-color: #61a0f8;
  justify-content: space-between;
  align-items: flex-end;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #f08bc3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 140px;
  height: 240px;
}

  
1
  
2
  
3