title: Is there a way I can place text after an <h1> on the same line?
body: <p>I have the following code:</p>
  
  <pre><code>&lt;h1&gt;&lt;span&gt;Test Heading&lt;/span&gt;&lt;/h1&gt; 
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>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; }
  </code></pre>
  
  <p>Right now it displays something like this:</p>
  
  <pre><code>XXXXXXXXXXXXXXXX
  x Test Heading X
  XXXXXXXXXXXXXXXX
  
  ----------------------------------------------------------------------------------------
  </code></pre>
  
  <p>What I need to be able to do is have text appear to the right of the heading like this:</p>
  
  <pre><code>XXXXXXXXXXXXXXXX     Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  x Test Heading X     more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  XXXXXXXXXXXXXXXX     aaaaaaaaaaaaaaaaaaaaaaaaaaa
  
  ----------------------------------------------------------------------------------------
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is an example of what I have now</p>
  
  <p><a href="http://jsfiddle.net/ryGFq/" rel="noreferrer">demo</a></p>