Aligning two DIVs by their child element

Question

I'm currently trying to figure out a way with CSS to layout semantically-defined multi-image figures, each image possibly with their own subcaptions. The semantic for this kind of figure is an outer <figure> div containing multiple <figure class=subfigure> divs. Each of the .subfigure divs contains exactly one <img> followed by a <figcaption class=subfigcaption>.

Here is a minimal working example on JSFiddle

Goal: I'm trying to achieve a kind of layout that is common in print media; each .subfigure is vertically aligned by the baseline of its unique <img> element, while its own .subfigcaption can run as long as it needs without affecting the relative positions of the <img> amongst each subfigure.

However, with my current layout code, I can only relatively align each .subfigure as a whole: the <img> and .subfigcaption is treated as an aggregate block. The result is, as can be seen in my working example, that a long subcaption can ruin the image alignments between the subfigures.

I'd really like to find a CSS solution that does not require me to change the semantically-relavant HTML. I've considered using the table layout format, but I don't see how to place the table rows correctly given the way my html is currently organized. Also, this style would be applied to a large number of content, so I can't exactly tweak each specific figure by hand.

---

Note: doing figure>figure {vertical-align: top;} looks okay for this example but isn't what I'm looking for. The goal is to mimic a print convention, that we align at the bottom of the images, not the top. In fact, the more exact goal is to have all the .subfigcaptions start at a common baseline, regardless of the relative size of the images.

---

Current layout

Desired layout

Answer 1

Err, am I missing something, or does just removing the vertical-align: middle give you the desired results:

http://jsfiddle.net/LzUaC/9/