Align Text Top with Sibling Element Background - css

Question

Ignore whether or not this actually looks good.
I'm looking for the best way to align the top of text with an adjacent block element with a background or image in it. With the test-case snippet below, what I'm trying to [elegantly] get rid of is the red gap:
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
<div class="col bg"></div>
<div class="col">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is essentially coming from the line-height. Setting line-height to 1 solves the problem but then borks any multi-line text which I need to support. Even applying the line-height change just to the :first-line results in bad spacing on multi-line text. Right now, the best I can think of is trying to come up with some magic-number negative em margin-top value to apply to headings, paragraphs, etc., but I'm wondering if there's a better way.

Answer 1

The h1 itself is aligned to the simbling element, but the text inside it is not.
To verticaly align the text into a h1 tag you need to set the line height.
.col {
width: 40%;
min-height: 300px;
float: left;
margin-right: 4%;
}
.bg {
background: #333;
}
p,h1 {
margin: 0;
}
.col h1 {
line-height: 21px;
}
.col h1 span {
vertical-align:super;
}
div{
padding:0;
}
<div class="col bg"></div>
<div class="col">
<h1><span>Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
EDIT:
to use it in a multi-line: put your text into a span with a vertical-align:super; The line-height property on h1 will control the space between lines.

Answer 2

The other answer provided right now does work but I really wanted to avoid the extra markup required to make it work. Unfortunately that led me to a magic number solution. I'm not sure there's a good solution right now that's pure-CSS. I played with the :first-line pseudo selector but to ill effect.
What I ended up with was just using a negative margin-top on the <h1> element. I think the value of of the margin more or less works out to:
-(({line-height} - 1 ) / 2)em
That assumes you're using unitless line-height values.