title: Text-Align right <select> with text that starts with a number
body: <p>I would like to have my <code>&lt;select&gt;</code> element to have my text aligned to the right. This can be achieved by using one of the following solutions:</p>
  
  <p><strong>CSS</strong> : <code>select{direction: rtl}</code></p>
  
  <p><strong>HTML ATTRIBUTE</strong> : <code>&lt;select dir="rtl"&gt;</code></p>
  
  <p>This works fine in the majority of situations, but there is a small annoying hiccup in a certain edge case.</p>
  
  <p>The hiccup happens when you do the following :</p>
  
  <pre><code>&lt;select dir="rtl"&gt;
      &lt;option value="1"&gt;1 Month&lt;/option&gt;
      &lt;option value="2"&gt;2 Months&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>So note that my <code>&lt;option&gt;</code> elements start with a <strong>Number</strong>. When using <code>dir="rtl"</code> the number is moved to the right, the rest of the sentence is respected.</p>
  
  <p>So the output will be like:</p>
  
  <ul>
  <li>Month 1</li>
  <li>Months 2</li>
  </ul>
  
  <p>Now if you prefix with a word, like :</p>
  
  <pre><code>&lt;select dir="rtl"&gt;
      &lt;option value="1"&gt;Some Prefix 1 Month&lt;/option&gt;
      &lt;option value="2"&gt;Some Prefix 2 Months&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The output will be like:</p>
  
  <ul>
  <li>Some Prefix 1 Month</li>
  <li>Some Prefix 2 Months</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #000000;
  }
  
  .form {
    background-color: #ffffff;
    width: 400px;
  }
  
  .form__row {
    border: 1px solid;
    margin 1rem auto 0 auto;
    display: flex;
    justify-content: space-between;
  }
  
  .form__row&gt;div {
    flex-basis: 50%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .form__row .label {
    padding-left: 1rem;
  }
  
  .form__row .input {
    padding-right: 1rem;
    text-align: right;
  }
  
  .form__row select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    background-color: inherit;
    direction: rtl;
  }
  
  .form__row input {
    text-align: right;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=form&gt;
    &lt;div class="form__row"&gt;
      &lt;div class="label"&gt;Your Name : &lt;/div&gt;
      &lt;div class="input"&gt;
        &lt;input type="text" placeholder="your name" value="This aligns right nicely"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form__row"&gt;
      &lt;div class="label"&gt;How long : &lt;/div&gt;
      &lt;div class="input"&gt;
        &lt;select&gt;
            &lt;option value="1"&gt;1 Month&lt;/option&gt;
            &lt;option value="2"&gt;2 Months&lt;/option&gt;
            &lt;option value="1"&gt;Prefixed 1 Month&lt;/option&gt;
            &lt;option value="2"&gt;Prefixed 2 Months&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can check <strong><a href="https://codepen.io/segersian/project/editor/AgbRjy#0" rel="nofollow noreferrer">fiddle here</a></strong> </p>
  
  <p>I think this is related with how 'right-to-left' (Arabic, Hebrew, ...) languages probably work with numbers. I recall reading once that they tend to have some certain rules regarding how numbers are placed or so.</p>
  
  <p><strong>TL;DR / Summary</strong></p>
  
  <p>Is there an alternative way to text align to the right with a <code>&lt;select&gt;</code> element? Or a clean workaround? I can change my numbers to written numbers (one, two, ...), but I was hoping for another alternative. Because in my case the numbers go up to 24. </p>