Well, I didn't test your exact code snippet, I went for a more semantic alternative (not counting the div wrapper, which would probably be a <section> in a real use-case scenario):
<h1>Site title</h1>
<div>
<h2>Run-in heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas rerum ea dignissimos? Omnis natus iste eos numquam quos necessitatibus quo quisquam accusantium ipsa blanditiis obcaecati magni ut nulla officia fugit labore, delectus architecto nemo iusto saepe soluta sit eius esse. Ullam quos autem assumenda, adipisci quidem quisquam natus beatae perferendis doloremque nemo? Perspiciatis nihil animi nisi molestias ullam omnis harum, neque recusandae non iusto dolores ipsa in vitae optio quisquam id officiis hic quod voluptatum dicta nulla nam ut nostrum possimus. Sunt id optio perspiciatis, debitis asperiores laborum doloremque voluptas hic, qui autem cum. Veritatis doloribus possimus consequatur ullam deleniti!</p>
</div>
with the following CSS:
h2 {
margin: 0;
float: left;
}
Setting a background color and different font sizes on body and h2/p is irrelevant here, because the problem remains the same: baselines are not aligned, and more than one line of paragraph text appears to the right of the heading before the text wraps around it.