Aligning different font sizes on the same line of text so it looks nice?

Question

Basically, I want to have an h1 and a p element on the same line, but the alignment is off a lot (meaning the H1 is higher than the P and looks crappy) and I've never had to do anything like this with css before!

I've thrown together a jsfiddle to accompany this, here is the code:

<h1 style="float:left;display:inline;">"Hi!</h1><p style="float:left;display:inline;">I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1 style="float:left;display:inline">"</h1>

http://jsfiddle.net/9H8xE/

Thanks!

Answer 1

Some advice before answer:

1. P tag is meant to create a new paaragraph, so if you do not need that use span tag instead.
2. Try to avoid inline styles, use CSS selectors.

http://jsfiddle.net/9H8xE/1/

Try this and let me know if it works

HTML:

<h1 >"Hi!</h1><p>I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1>"</h1>

CSS:

p
{
    display:inline;
}
h1{
    display:inline
}