Using pull-right inside element aligns the text with the center. How do I align it with the baseline

Question

So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.

https://jsfiddle.net/je5dpqrL/

The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size . Now, since it's floating, the text is centered.

Is there any way to align the text so that the baseline of the Title and the <a> element is the same?

Answer 1

You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):

.cl {
    font-weight: normal;
    font-size: 40%;
    display: inline-block;
    line-height:4em
}

Answer 2

This is what you need https://jsfiddle.net/p05bu4c2 . Create a span inside the link

 .cl { font-weight: normal; font-size: 40%; display: inline-block; } .cl span { line-height: 1; vertical-align: bottom; } h2 { border:1px solid #ff0000; } 

 <h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2> 

Answer 3

So, The following code seems to work:

<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>

Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-height s

JSFiddle: https://jsfiddle.net/je5dpqrL/10/

EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.