I am looking to align two columns of headings to the baseline, with each having a different font size. Additionally, I want one column on the left side and the other on the right side.
To achieve this, using display: inline-block will ensure that they are aligned to the baseline, regardless of the maximum width.
In the HTML:
<div class="headings interior">
<div class="headings-position">
<h2 class="left heading">Main Heading</h2>
<h3 class="right sub-heading">Subheading with lengthier text & More Content</h3>
</div>
</div>
In the 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;
}
Check out the Fiddle here: http://jsfiddle.net/qgjttauq/