title: Display heading inline with following paragraph
body: <p>Given the following semantic markup:</p>
  
  <pre><code>&lt;h3&gt; SCOPE OF WORK. &lt;/h3&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
  &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
  </code></pre>
  
  <p>I would like to display the heading inline with the paragraph, like so:</p>
  
  <blockquote>
    <p><strong>SCOPE OF WORK.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</p>
    
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat.</p>
  </blockquote>
  
  <p><strong>Option 1: float the heading.</strong></p>
  
  <p>This works so long as the heading fits on one line. When it doesn't, the float forms a wide block so the paragraph starts to the right of the block, or below instead of continuing inline:</p>
  
  <pre><code>| SCOPE OF | Lorem |
  | WORK     | ipsum |
  | sit amet, consect|
  </code></pre>
  
  <p><strong>Option 2: display both elements inline.</strong></p>
  
  <p>A style rule such as: <code>h3, h3+* {display: inline;}</code> might work. This assumes that they are preceded &amp; followed by other block elements. Otherwise, other inline elements would flow into them. Also, the adjacent selector (<code>+</code>) is not available in all browsers.</p>
  
  <p><strong>Option 3?</strong></p>
  
  <p>Without adding unnecessary classes or wrapper elements, and keeping it valid &amp; semantic (no <code>span.h3</code> inside the paragraph!), is there a better way to do this simple thing?</p>