title: aligning text in float right
body: <p>Trying to align text that is in a div with float right</p>
  
  <p>Trying at add tabs to my information, seems to be working with phone numbers, but if i'm floating it right it does not work.</p>
  
  <p>Also when my screen is smaller then 400px the information text does not seem to be 100% centred.</p>
  
  <p>The code:</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-css lang-css prettyprint-override"><code>p span {
    display: inline-block;
    width: 100px;
  }
  
  .responsive {
    display: inline-block;
    width: 100%;
  }
  
  .responsive .left {
    float: left;
    width: 50%;
  }
  
  .responsive .right {
    float: right;
    text-align: right;
    width: 50%;
  }
  
  @media (max-width: 400px) {
    .responsive .left,
    .responsive .right {
      width: 100%;
      text-align: center;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="responsive"&gt;
    &lt;div class="left"&gt;
      &lt;h2&gt;Infomation:&lt;/h2&gt;
      &lt;p&gt;
        &lt;span&gt;Phone:    &lt;/span&gt;(00) 00000000&lt;br/&gt;
        &lt;span&gt;Fax:      &lt;/span&gt;(00) 00000000&lt;br/&gt;
        &lt;span&gt;Email:    &lt;/span&gt;&lt;a href="mailto:contact@email.com "&gt;contact@email.com&lt;br/&gt;&lt;/a&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="right"&gt;
      &lt;h2&gt;Business Hours:&lt;/h2&gt;
      &lt;p&gt;
        &lt;span&gt;Mon - Th:&lt;/span&gt; 8:30 - 5:00&lt;br/&gt; &lt;span&gt;Friday:&lt;/span&gt; 8:30 - 3:30&lt;br/&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>