title: HTML Dropdown Auto-Width Adjust
body: <p>I've created a dropdown that has issues resizing according to what's selected. I'm using the following stackoverflow answer as inspiration to resize my dropdown: <a href="https://stackoverflow.com/a/20091985/3166468">https://stackoverflow.com/a/20091985/3166468</a></p>
  
  <p>For some reason, although the resizing happens, it always resizes either too much or too little. Here's the jsFiddle: <a href="https://jsfiddle.net/yadhwb97/3/" rel="nofollow noreferrer">https://jsfiddle.net/yadhwb97/3/</a></p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
    &lt;select id="real_dropdown"&gt;
      &lt;option disabled=""&gt;Options&lt;/option&gt;
      &lt;option value="long"&gt;Something super long in here&lt;/option&gt;
      &lt;option value="short"&gt;Short&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;select id="width_tmp_select"&gt;
    &lt;option id="width_tmp_option"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And this is the jQuery:</p>
  
  <pre><code>$(document).ready(function() {
    $('.dropdown').change(function(){
      $("#width_tmp_option").html($('.dropdown option:selected').text()); 
      $(this).width($("#width_tmp_select").width()+30);  
    });
  });
  </code></pre>
  
  <p>When you select the dropdown options, you'll see how it resizes either too much or too little. How can I make the resizing work correctly?</p>