Adding a line of text underneath underneath a horizontal scroll of images with CSS - css

Question

I am trying to put a line of text underneath the first image in an horizontal scroll. However, each time I try, it inserts the text mid way down the page and doesn't line up with the image.
I have attached my code below. Would someone be able to help and let me know the best way to achieve the above.
Edit Please find an image attached of what I am trying to achieve.
Thank you in advance. Esmé
* {
margin: 0;
padding: 0;
line-height: inherit;
}
.horizontal_slider {
display: block;
width: 100%;
overflow-x: scroll;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider_video {
display: block;
width: 100%;
overflow-x: hidden;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider::-webkit-scrollbar {
display: none;
}
/* for ms*/
.horizontal_slider {
-ms-overflow-style: none;
}
.slider_container {
display: block;
white-space: nowrap;
}
.item {
display: inline-block;
margin-right: 10px;
}
.item img {
width: px;
height: 850px;
object-fit: cover;
}
<div class="slider_container">
<div class="horizontal_slider">
<div class="slider_container">
<div style="text-align: left">
<h2>Side by side sisters</h2>
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/0b6e5d416b8d2666e95ad95076f5a051e7c744345a0c66f43667f08f1a2619d6/0007-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/21fae0988d8a0ae94a7dabcf10286fd8fc6e0488a3801de8017c2932024f46bb/0008-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
</div>
</div>

Answer 1

The semantically correct way to do this is to wrap each image in a figure element and include a figcaption for the text. So something like:
<figure>
<img src="image.jpg" alt="image descriptor">
<figcaption>The caption that goes below the image</figcaption>
</figure>
You will no doubt need to adjust the css to make this look correct.