html - 无法将标题旁边的段落与多行换行对齐

Question

我想要的是让标题 (h2) 与标题右侧的一些文本 (p) 左对齐。调整窗口大小时，段落文本也应换行，以便它使用标题旁边的任何可用空间。现在发生的是较小的段落文本在标题下换行，留下很大的空隙。

这是一个 jsfiddle .您会看到带有灰色背景的文本在标题下方环绕，留下很大的空隙。只要有足够的空间，我就希望段落自动换行。

如果 jsfiddle 不可用，请使用代码:

HTML:

<section>
<div>
    <h2>Contact Me</h2>
    <p>You can Contact Me at sample@smaple.com or use the contact form below:</p>
</div>
</section>

CSS:

section{
    background-color:#CCC;
    width:100%;
}
section div{
    background-color:#39F;
    border-bottom:3px solid #333;
}
section div h2{
    font-family:helveticaInserat;
    font-size:2.6em;
    display:inline;
    background-color:red;
}
section div p{
    font-family:helveticaInserat;
    background-color:#CCC;
    display:inline;
    vertical-align:top;
    line-height:1em;
}

请记住，所有文本都是动态的，并且在可用空间不足时需要换行，如何才能做到这一点？

Answer 1

section div h2 {
    font-family:helveticaInserat;
    font-size:2.6em;
    float: left;
    background-color:red;
}
section div p {
    font-family:helveticaInserat;
    background-color:#CCC;
    vertical-align:top;
    line-height:1em;
}

http://jsfiddle.net/Z9A32/2/