Is there a best practice when you want an html heading element's content to be displayed over multiple lines?

I know the following HTML is not valid because the div inside the h2 is a block element:

HTML

<h2>
    <div>November 23 2015</div>
    <div>This Is My First Blog Post</div>
</h2>

I want to know what the best way to get the date and title of this example blog post heading to display on separate lines with valid HTML. I've done the following which I understand is technically valid:

HTML

<h2>
    <span>November 23 2015</span>
    <span>This Is My First Blog Post</span>
</h2>

CSS

span { display: block; }

Maybe I'm wrong in thinking the date of this example blog post should be considered part of the heading of the post, and I should just do something like this:

HTML

<p>November 23 2015</p>
<h2>This Is My First Blog Post</h2>

But assuming there is some case where you'd have a legitimate need for a multi line heading, I'm wondering what the best way to do it is.

EDIT

I should add that I know I can also just add a <br> after the first <span>, but the issue with that approach is losing control over the vertical spacing between the lines because adjusting the top/bottom margins/padding doesn't work for inline elements.