title: how to have text between an HR line
body: <p>How can I have my text between an <code>&lt;HR&gt;</code> line?</p>
  
  <p>For example: <a href="http://jsfiddle.net/VrvvX/" rel="nofollow">http://jsfiddle.net/VrvvX/</a></p>
  
  <pre><code>&lt;div id="outerDiv"&gt;
      &lt;button id="myButton"&gt;Do This&lt;/button&gt;
      &lt;br&gt;-----------or do something else-&lt;br&gt;
      &lt;table id="mytable"&gt;
          &lt;tr&gt;
              &lt;td&gt;Blah:&lt;/td&gt;
              &lt;td&gt;&lt;select id="foo"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Blah:&lt;/td&gt;
              &lt;td&gt;&lt;select id="foo"&gt;&lt;/select&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;​
  </code></pre>
  
  <p>Rather than having <code>-----</code> I'd like to have a pretty <code>&lt;hr&gt;</code> tag which works like a separator between the <code>button</code> and the <code>table</code>. </p>