title: How to float text to the right for Angular UI Bootstrap?
body: <p>I want to float the countdown timer text for an <code>alert</code> element which will auto-close towards <strong>the right side</strong> of a Angular UI Bootstrap's <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">alert</a></p>
  
  <p>When I use something super simplistic like <code>class="pull-right"</code>, it looks quite ugly as it loses its alignment with the rest of the message.
  <img src="https://i.stack.imgur.com/HBe4u.png" alt="enter image description here">
  Any hint or ideas for styling it properly?</p>
  
  <h2>Edit # 1</h2>
  
  <p>When using rows/columns, it doesn't end up looking right:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-md-6"&gt;
      &lt;alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-2"&gt;{{alert.msg}}&lt;/div&gt;
              &lt;div class="col-md-2 col-md-offset-1"&gt;({{countdownInMilliSeconds/1000}})&lt;/div&gt;
          &lt;/div&gt;
      &lt;/alert&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here down how it looks like:
  <img src="https://i.stack.imgur.com/bJHGu.png" alt="enter image description here"></p>