title: CSS Distort In Horizontal Alignment
body: <p>I'm producing an application using Oracle APEX, unfortunately APEX still doesn't support RTL so I'm doing it my own custom way. I've got a tabular form with a date column shown with a datepicker.</p>
  
  <p>I want the datepicker trigger button to be on the right hand side of the input field. </p>
  
  <p>When using <code>float: left</code> I have a distortion issue. It's a bit difficult recreating the same situation so I'll go with a screenshot.</p>
  
  <p>This is what it initially looks like :</p>
  
  <p><img src="https://i.stack.imgur.com/IpXp6.png" alt="Initial Screenshot"></p>
  
  <p>And this is what it looks like after adding the float style:</p>
  
  <p><img src="https://i.stack.imgur.com/1uZKS.png" alt="Distorted Screenshot"></p>
  
  <p>This is what the html code looks like :</p>
  
  <pre><code>&lt;td headers="CAL_DATE"&gt;
  &lt;span style="direction: ltr"&gt;
      &lt;label for="f03_0001" id="f03_0001_LABEL" class="u-VisuallyHidden"&gt;Cal Date&lt;/label&gt;
      &lt;span style="white-space: nowrap;"&gt;
          &lt;button type="button" class="ui-datepicker-trigger"&gt;
              &lt;span class="a-Icon icon-calendar"&gt;&lt;/span&gt;
              &lt;span class="u-VisuallyHidden"&gt;پنجره تقويم: Cal Date
                  &lt;span&gt;&lt;/span&gt;
              &lt;/span&gt;
          &lt;/button&gt;
          &lt;input type="text" class="u-TF-item u-TF-item--datepicker  hasDatepicker" id="f03_0001" name="f03" maxlength="2000" size="12" value="2012/07/11" autocomplete="off"&gt;
          &lt;/span&gt;
      &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>This is the css for the <strong>ui-datepicker-trigger</strong> class :</p>
  
  <pre><code>.ui-datepicker-trigger {
  margin: 0 0 0 2px;
  vertical-align: top;
  float: left;}
  </code></pre>
  
  <p>I would very much appreciate any help in advance.</p>