title: How do I make my DIV only take up the width of the elements it contains?
body: <p>I have a little form that is inside a larger div:</p>
  
  <pre><code>&lt;div id="confirmEmailContainer"&gt;
    &lt;form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input type="hidden" name="_method" value="patch" /&gt;&lt;input type="hidden" name="authenticity_token" value="hWjOQEpKyMKVrk9+vWEeenl3D49rVe4hXFKgF4lza09xXRo0HENKMqGRpq9xUflWqbGJUdoxrmQrsksQWV5s7g==" /&gt;
  
      &lt;div class="field"&gt;
        &lt;label for="user_email"&gt;Email&lt;/label&gt; &lt;span class="required"&gt;*&lt;/span&gt; &lt;br&gt;
        &lt;div&gt;
          &lt;input size="30" style="display: inline;" type="text" value="myemail@msn.com" name="user[email]" id="user_email" /&gt; 
          &lt;span id="emailConfirmedStatus"&gt;
            &lt;div class="unconfirmed" style="display: block"&gt;&lt;img style="vertical-align:middle" src="/assets/x-mark-621493006f6052df98aa84352a33f21bccabfc670129ca9572009545745040d9.png" alt="X mark" width="16" height="16" /&gt; Unconfirmed&lt;/div&gt;
            &lt;div class="confirmed" style="display: none"&gt;&lt;img style="vertical-align:middle" src="/assets/checkmark-b87ae8ffea696b9c9587f26fdb656af7a21da4f7f73da01fc4bef9b35a1b9465.svg" alt="Checkmark" width="16" height="16" /&gt; Confirmed&lt;/div&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="actions buttonContainer"&gt;
        &lt;input type="submit" name="commit" value="Send Confirmation Email" id="submit" class="button btn" data-disable-with="Send Confirmation Email" /&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do not specify CSS <code>width</code> properties anywhere, including the form or its container:</p>
  
  <pre class="lang-css prettyprint-override"><code>#confirmEmailContainer {
      background-color: #fff;
      text-align: left;
  }
  
  form {
      margin: 4% 15%;
      font-family: Manuelle;
      font-size: 14px;
  }
  </code></pre>
  
  
  
  <p>but yet the container is almost taking up the entire width of the content area -- <a href="https://jsfiddle.net/70pgd6jn/" rel="nofollow noreferrer">https://jsfiddle.net/70pgd6jn/</a> .  How do I make the form only occupy the width of its elements ?</p>