title: How do I place a button next to a heading?
body: <p>I thought using <code>float: right;</code> would fix this, but it makes the button appear outside of the div. How do I solve this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
    &lt;h1&gt;Title&lt;/h1&gt; &lt;button&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main {
    width: 200px;
    border: 1px dotted black;
  }
  h1 {
    margin: 0;
  }
  button {
    float: right;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/tmj734ht/" rel="noreferrer">JSFiddle</a></p>