title: H1 on the left, "buttons" on the right, vertically aligned
body: <p>I'm trying to display on one line:</p>
  
  <ul>
  <li>a H1 element aligned to the left of the containing box</li>
  <li>several "buttons" (A elements here) aligned to the right of the containing box</li>
  <li>all being on the same baseline</li>
  </ul>
  
  <p>Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.</p>
  
  <pre><code>&lt;div id="block1"&gt;
      &lt;h1&gt;What a great title&lt;/h1&gt;
      &lt;a href="javascript:void(0)"&gt;This link can kill you&lt;/a&gt;
      &lt;a href="javascript:void(0)"&gt;Click if you dare&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically):
  <a href="http://jsfiddle.net/GlauberRocha/bUsvX/">http://jsfiddle.net/GlauberRocha/bUsvX/</a></p>
  
  <p>Any idea?</p>