Inline elements do not wrap to baseline grid

Question

I cannot get the text inside my <header> to align to a baseline grid when the text wraps.

HTML:

<header>
    <h1>Sample Title</h1>
    <p class="tag">#Tag</p>
</header>

CSS:

header {
    display: block;
    }

h1 {
    display: inline;
    font-size: 36px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }

p {
    display: inline-block;
    font-size: 18px;
    line-height: 36px;
    margin: 0 24px 0 0;
    }

[Good] Text without wrapping

[Bad] Text does not align to grid when it wraps between <h1> and <p>

[Good] Text aligns to grid when it wraps through <h1>

I followed @sled's suggestion to set line-height: 0 on <header>, but that gave me the opposite problem:

[Good] Text aligns to grid when it wraps between <h1> and <p>

[Bad] Text does not align to grid when it wraps through <h1>

Answer 1

Set vertical-align on <p> to bottom. Setting line-height on <header> is not necessary.

Answer 2

Vertical alignment defaults to baseline, but takes it's "typography" characteristics from it's parent. <header> has nothing to pass on to it's children so they're left to default values. But since your looking for your #tag element to adjust with your <h1> element, try this:

First, change your <p> to a <span>, you can just as easily turn a <span> into an inline-block as a <p> and not have to then correct for all the margin and padding (cleaner CSS).

Then place the <span> within the <h1> tag

HTML:

<header>
    <h1>Sample Title
        <span class="tag">#Tag</span>
    </h1>
</header>

CSS:

h1 {
    line-height: 36px;
    font-size: 36px;
    margin: 0 24px 0 0;
}
span {
    font-size: 18px;
}