Question

How can I align the bottom of an inline block (call it ‘IB’) with the bottom of the text – excluding descenders like that on ‘g’ – in a parent element (call it ‘PE’)? This should be in a way which generalises whatever the size of the text – I don’t want to hardcode size-specific pixel values.

Here is an example of the HTML I’d use, with the classes I’d need CSS for:

<div class="pe">
    Parent text line
    <span class="ib" style="display: inline-block;">
        - and child text line
    </span>
</div>

And here’s what I’d like it to look like:

Answer 1

OP updated saying: “Thanks, but I’ve edited the question to clarify I don’t want to hardcode size-specific pixel values.”

In that case, I’m afraid there isn’t a solution that will automatically fix different lines with different text sizes. The other solution I provided isn’t even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you’d need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn’t trust that to work consistently.