Is there a way I can place text after an <h1> on the same line?

Question

I have the following code:

<h1><span>Test Heading</span></h1> 

and CSS:

h1 { font-size: 1.3em; font-family: calibri, arial;border-bottom: 1px solid #999; padding-bottom: 10px;margin-bottom: 5px; background-color: pink;}
h1 span { color: #fff; background-color: #446688;padding: 1px 5px 3px 5px;
          -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

Right now it displays something like this:

XXXXXXXXXXXXXXXX
x Test Heading X
XXXXXXXXXXXXXXXX

----------------------------------------------------------------------------------------

What I need to be able to do is have text appear to the right of the heading like this:

XXXXXXXXXXXXXXXX     Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
x Test Heading X     more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
XXXXXXXXXXXXXXXX     aaaaaaaaaaaaaaaaaaaaaaaaaaa

----------------------------------------------------------------------------------------

I think this is not so easy to do. Can anyone suggest how I could do this? I guess I need some kind of outer enclosing DIV for my heading but when I tried that the text always appears below the heading instead of to the right.

Here is an example of what I have now

demo

Answer 1

try

display:inline;

http://jsfiddle.net/gKqQc/

Answer 2

Wrap it all in a <div>, move the pink background color and bottom border to the <div>, and float the <h1> to the left.

For example:

<div class="bb">
    <h1><span>Test Heading</span></h1> 
    This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</div>

CSS:

.bb {
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
}
h1 {
    font-size: 1.3em;
    font-family: calibri, arial;
    margin-bottom: 5px;
    float: left;
}
h1 span {
    color: #fff;
    background-color: #446688;
    padding: 1px 5px 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Fiddle: http://jsfiddle.net/ambiguous/FNLBD/

You'll probably want to pretty up the paddings and margins a bit though.