0

I have 3 elements (1 image, 2 texts) inside a flex container. I am not able to align them on the bottom line. I tried with margin-bottom: 0 margin-bottom: auto and it is not working.

.distance {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
}

.icon {
  width: auto;
  max-height: 100px;
  margin-right: 8px;
}

.text1 {
  font-size: 15px;
}

.text2 {
  font-size: 12px;
  margin-bottom: 0px;
}
<div class="distance">
  <div class="flex">
    <img src="https://r00t4bl3.com/uploads/pp-840x830-pad-1000x1000-f8f8f8-c3edd4cbfc0d7bc9d7b02b27c6f6bac5.jpg" class="icon">
    <div class="text1">
      Golang
    </div>
    <div class="text2">
      Made by Google
    </div>
  </div>
</div>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
kike
  • 658
  • 1
  • 8
  • 26

1 Answers1

1

for vertical align in a flex display use the property align-items. in your case add align-items: flex-end at flex class. css-tricks is a good reference for flexbox.

buzatto
  • 9,704
  • 5
  • 24
  • 33