title: Right-align dropdown menu in select2
body: <p>Is there a way to right-align the dropdown menu with <code>dropdownAutoWidth: true</code> in a select2, instead of the standard left-align? I want the select to stay the same, but the dropdown to move to the left so it aligns with the select on the right side. See snippet below with the wrong alignment...</p>
  
  <p>Note: I want different sizes of the select and the dropdown just as shown.</p>
  
  <p>Edit // Updated with suggestion to add <code>direction: rtl; text-align: right;</code>. This only right-aligns the text. I want the whole dropdown to right-align with the selected option above it. E.g. the dropdown should stick out to the left of the selected option, not to the right.</p>
  
  <p>Edit 2 // Updated with <code>.select2-dropdown { left: -69px !important; }</code> This makes it look the way I want, but is there a way to not have to set a fixed value of -69px?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".form-control").select2({
      width: '100px',
      dropdownAutoWidth : true,
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.select2-container--default .select2-results &gt; .select2-results__options { direction: rtl; text-align: right; }
  .select2-dropdown {
  left:-69px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;select class="form-control"&gt;
    &lt;option selected="selected"&gt;orange&lt;/option&gt;
    &lt;option&gt;white&lt;/option&gt;
    &lt;option selected="selected"&gt;purple&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want it to look like this, but not with a fixed value to achieve it.</p>
  
  <p><a href="https://i.stack.imgur.com/96DSf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/96DSf.jpg" alt="enter image description here"></a></p>