If your captions are all of uneven lengths as well, then Flexbox is your best pure CSS option.
http://codepen.io/cimmanon/pen/vJeDk
<div class="gallery">
<figure>
<img src="http://placehold.it/100x200" />
<figcaption>My caption here, this one is a really long one. Oh boy, so long.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x150" />
<figcaption>My caption here</figcaption>
</figure>
</div>
The CSS:
.gallery {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
-webkit-box-align: baseline;
-moz-box-align: baseline;
}
.gallery figure {
/* optional */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
/* optional */
.gallery {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
If your elements need to wrap, then browser support is limited to Opera, Chrome, and IE10. http://caniuse.com/flexbox