jquery - Align multiple images (with captions) to baseline, all different heights

Question

I've been searching for days how to get this layout working, I need a little help

I just want my images to be aligned to the baseline of the tallest image, per line, and the captions below that line. I see you have a lot of experience with building layouts with images and jquery, If you could point me in the right direction I think I could solve it.

Here is the jsfiddle for what Ive got, but I think I might have to ditch masonry as my client just wants a nice baseline.. but with a responsive wrap of course.. http://jsfiddle.net/perrodeagua/SeXDu/embedded/result/

Here's my current css, I ain't married to it though

.thePics {
padding:5px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
float: left;
 width:200px;
 height:auto;
 border:1px;
 text-align:left;


}

#PICS {
 width:auto;
}

And here is mockup of what I need http://postimg.org/image/sygkducs5/

Thanks!

Answer 1

You mean, like this? http://jsfiddle.net/LeBen/yFEc6/

Actually tested in Chrome, Safari & Firefox and images are aligned to the baseline by default using <figure>.