title: How to create a div box with dynamic width based on text content?
body: <p>I want to create a simple <code>div</code> that shrinks and expands according to the content contained.</p>
  
  <p><a href="https://jsfiddle.net/qa5dr0x8/" rel="noreferrer">https://jsfiddle.net/qa5dr0x8/</a></p>
  
  <pre><code>&lt;body&gt;
    &lt;div style="border: 1px solid red; padding: 15px; width:auto;"&gt;
      test text
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Result: the red box expands to the full width of the page. Why?</p>