CSS Vertical Align Baseline HTML Headings

Question

I have two columns of headings that I want to align to the baseline which are both different font-sizes. In addition to this I want one on the left side and one on the right side.

If you use display: inline-block they are aligned to the baseline, regardless of the max-width.

HTML:

<div class="headings interior">
    <div class="headings-position">
        <h2 class="left heading">Heading</h2>
        <h3 class="right sub-heading">Heading with long text & Stuff</h3>
    </div>
</div>

CSS:

h2,h3 {
    margin: 0;
    display: inline-block;
    position: relative;
}
h2 {
    left: 0;
    bottom: 0
}
h3 {
    max-width: 100px;
    right: 0;
    bottom: 0;
    text-align:right;
}
.headings {
    position: relative;
    height: 200px;
    width: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}

Fiddle: http://jsfiddle.net/qgjttauq/

Answer 1

You need to use float: left for h2 instead of left: 0, and float: right for h3 instead of right: 0.

Fiddle

Answer 2

h3 {
    float: right;
    //additional styles
}