title: Css h1 matching div width
body: <p>I have the following html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;h1 style="margin-bottom: 0;"&gt;Hello Plunker!&lt;/h1&gt;
      &lt;div style="background-color: red; height: 100px; width: 250px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically I would like to give my h1 a <code>width</code> that the text inside it should occupy no matter if I add or remove a word (adapting the <code>font-size</code> and <code>the letter-spacing</code> according to it). I could change my "Hello Plunker" and the last letter should still finish where the div below finishes.</p>
  
  <p>I can use some js if needed but not Jquery</p>