title: Make div container auto-expand width to the left instead of the right when text is added
body: <p>I have a little dropdown, which works just fine:</p>
  
  <p><a href="https://i.stack.imgur.com/IPpCa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IPpCa.png" alt="enter image description here"></a></p>
  
  <p>However, when more text is added to the dropdown, the div expands to the right, like so:</p>
  
  <p><a href="https://i.stack.imgur.com/RFH8Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RFH8Q.png" alt="enter image description here"></a></p>
  
  <p>Whereas I'd rather it expand to the left.</p>
  
  <p><strong>Markup/Blade</strong> (I'm using Laravel):</p>
  
  <pre><code>&lt;div class="status-dropdown-arrow pointer" id="status-dropdown-arrow-{{ $status-&gt;id }}" data-value="{{ $status-&gt;id }}"&gt;&lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;
   &lt;ul class="fallback"&gt;
      @if (Auth::user()-&gt;isFollowing($status-&gt;user))      
       &lt;a href="{{ route('get.following.add', ['username' =&gt; $status-&gt;user-&gt;username]) }}"&gt;&lt;li&gt;Unfollow&lt;/li&gt;&lt;/a&gt;
      @else 
       &lt;a href="{{ route('get.following.add', ['username' =&gt; $status-&gt;user-&gt;username]) }}"&gt;&lt;li&gt;Follow&lt;/li&gt;&lt;/a&gt;    
      @endif
      &lt;a href="{{ route('status.report', ['statusId' =&gt; $status-&gt;id]) }}"&gt;&lt;li&gt;Report&lt;/li&gt;&lt;/a&gt;                     
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.status-dropdown-arrow {
  float:right;
  margin-top: -58px;
  color:#b9adad;
  }
  
  .status-dropdown-arrow ul.fallback {
  position: absolute;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  padding: 5px;
  display: none;
  z-index: 1000;
  background-color: #f6f4f4;
  list-style: none;
  margin-top: 0px;
  margin-left: -72px;
  }
  </code></pre>
  
  <p>How could I make the container expand to the left rather than the right?</p>