title: Float a div in top right corner without overlapping sibling header
body: <p>Having a <code>div</code> and a <code>h1</code> inside a section, how do i float the div in the top right corner without overlapping the text of the header ?</p>
  
  <p>The HTML code is the following:</p>
  
  <pre><code>&lt;section&gt;
    &lt;h1&gt;some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6&lt;/h1&gt;
    &lt;div&gt;&lt;button&gt;button&lt;/button&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <ul>
  <li><p>I tried an absolute position relative to the parent but the text is overlapped, <a href="http://jsfiddle.net/FnpS8/2/" rel="noreferrer">http://jsfiddle.net/FnpS8/2/</a></p>
  
  <p><img src="https://i.stack.imgur.com/HLDQj.png" alt="div overlapping text"></p></li>
  </ul>
  
  <p>Using this CSS code:</p>
  
  <pre><code>section { position: relative; }
  h1  { display: inline; }
  div {
      position: absolute;
      top: 0;
      right: 0;
  }
  </code></pre>
  
  <ul>
  <li><p>I tried floating the div to the right but it doesn't remain in the top right corner, <a href="http://jsfiddle.net/P6xCw/2/" rel="noreferrer">http://jsfiddle.net/P6xCw/2/</a></p>
  
  <p><img src="https://i.stack.imgur.com/f3z5r.png" alt="div floated to the right"></p></li>
  </ul>
  
  <p>Using this CSS code:</p>
  
  <pre><code>h1  { display: inline; }
  div { float: right;    }
  </code></pre>
  
  <p>​</p>
  
  <p>I know there is a lot of similar questions but I couldn't find one solving this case.</p>