I am trying to arrange multiple images in a row with captions underneath each of them. I want the images aligned while allowing the captions to flow naturally below the images, even if they vary in length. Despite following advice from previous posts on SO to limit caption width to match the image, I am facing issues. The problem is that when a caption spans multiple lines, it pushes the image up and all the captions align instead of the images themselves.
Here is the HTML structure:
<div class="wwapictures">
<div class="wwaimg" id="1">
<figure>
<img src="image1.jpg">
<figcaption>Caption 1</figcaption>
</figure>
</div>
<div class="wwaimg" id="2">
<figure>
<img src="image2.jpg">
<figcaption>Longer Caption 2<br>With Multiple Lines</figcaption>
</figure>
</div>
</div>
And the accompanying CSS:
.wwapictures .wwaimg img {
padding: 10px 5px 0px 5px;
}
.wwapictures .wwaimg {
display: inline-block;
padding-bottom: 100px;
}
.wwapictures figure {
width: min-content;
}
How can I ensure that the images are aligned properly while accommodating captions of varying lengths under each picture?