How to align a text and a image with bottom-line in html?

1
2
3
4

<div class="container">
  <img src="your_image_path" alt="Your Image">
  <p>Your Text</p>
</div>

1
2
3
4

.container {
  display: flex;
  align-items: flex-end;
}

1
2
3
4

<div class="container">
  <img src="your_image_path" alt="Your Image">
  <p>Your Text</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.container {
  position: relative;
}

img {
  position: absolute;
  bottom: 0;
}

p {
  margin-bottom: 0; /* Optionally, remove any default margin on the paragraph */
}