vertical aligning two pull-right elements of different heights (Bootstrap)

Question

I have two links (one text and one image) that I'm trying to pull-right and have the bottom of each vertically-align. But right now, it looks like this:

(vertically aligned with each others' tops)

Relevant HTML:

<div class="col-md-7">
    <div class="thumbnail">
        <div class="caption clearfix">
            <h2>Heading</h2>
            <p class="thin">Donut jelly beans muffin cupcake. Oat cake caramels gingerbread cotton candy.</p>
            <p class="thin">Chupa chips biscuit jelly chocolate bar danish caramels sugar plum cupcake.</p>
            <a href="#" class="pull-right"><img src="http://placehold.it/100x70"></a>
            <a href="#" class="pull-right">See example</a>
        </div>
    </div>
</div>

Does anyone know how I would vertically align to each elements' bottom?

Answer 1

One way is to put both A elements in a div container, then float that div to the right. From there, set the A elements to inline-block and vertical align: bottom. Here is a working example: http://jsfiddle.net/z26s7nb1/2/

<div class="col-md-7">
<div class="thumbnail">
    <div class="caption clearfix">
        <h2>Heading</h2>
        <p class="thin">Donut jelly beans muffin cupcake. Oat cake caramels gingerbread cotton candy.</p>
        <p class="thin">Chupa chips biscuit jelly chocolate bar danish caramels sugar plum cupcake.</p>
        <div class="pull-right">
            <a href="#">See example</a><a href="#"><img src="http://placehold.it/100x70"></a></div>
    </div>
    </div>
</div>

And your CSS:

.pull-right
{
    float: right;

}
    .pull-right a
{
    display: inline-block;
    vertical-align: bottom;    
}