Question

I’m trying to get a header aligned with a body of text by baseline, but this seems to prove surprisingly hard. I’ve been toying with different methods but can’t seem to find the perfect solution. Here’s an example of what I’m after:

<h2>XxMmxX</h2>
<p class="right">
    I saw for the first time the earth's shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
</p>

Style:

h2 {
    position: relative;
    font-size: 24px;
    line-height: 40px;
    text-align: right;
    width: 190px;
    top: 30px;
}
.right {
    margin-left: 200px;
    font-size: 14px;
    line-height: 20px;
}

I would like to have the baseline of ‘XxMmxX’ aligned with the baseline of the text.

Some notes:

• The header is right-aligned and has a fixed width
• The header uses a bigger font-size than body
• I want them to be perfectly aligned, this means not just setting a top of some px and having it almost aligned. (this page will be printed and this will definitely be noticeable)

Answer 1

Try using a table, and use vertical-align: baseline;