There may be a more elegant way, but this seems to work:
<style>
div.two-images {
border: 1px solid red;
display: table;
margin: auto;
width: 500px;
}
div.two-images > div {
display: table-row;
}
figure {
display: table-cell;
height: auto;
padding: 10px;
width: 200px;
}
figure img {
float: left;
height: auto;
width: 100%;
}
figcaption {
text-align: center;
}
</style>
<div class="two-images">
<div>
<figure>
<img src="http://localhost/test/wp-content/uploads/downloads_dog.jpg" alt='' />
<figcaption>The Dog of the Month</figcaption>
</figure>
<figure>
<img src="http://localhost/test/wp-content/uploads/Fred.jpg" alt='' />
<figcaption>Fred, a black Lab</figcaption>
</figure>
</div>
</div>
If you enter this in the TinyMCE editor, you will need to stay in Text mode. An alternative is to put this in a shortcode that you can enter in Visual mode.