2 headers lined up with 2 images side by side - html

Question

I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.

Answer 1

you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps