H1 tag and P tag on the same line?

Both <p> and <h1> elements are block level - that means they take up the complete width of their container. You can try floating both elements to the left. This stacks them up on each other to the left side and also converts them to inline elements.

So if you had:

<div id="containerIntro">
    <h1>Headline</h1>
    <p>And here the text right after...</p>
</div>

Your CSS would have to look something like this:

#containerIntro h1,
#containerIntro p {
    display: inline;
    vertical-align: top;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
}

See http://jsfiddle.net/F3Bcd/3/.