title: Properly align spacing between elements in a table cell
body: <p>I've tried searching, but I don't know what to call this. I'm trying to do accomplish what looks like the left side in this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/sKQgb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sKQgb.png" alt="Table"></a></p>
  
  <p>However when I change the width of the page, it folds and causes an unwanted behavior.</p>
  
  <p>I'm using <code>margin-left: 50px; float:left</code> for the caret and <code>margin-right: 50px</code> for the text.</p>
  
  <p><a href="http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview" rel="nofollow noreferrer">http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
      &lt;link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;table class="table table-bordered text-center"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Money&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;1&lt;/th&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;&lt;i class="fa fa-caret-up" style="float:left; margin-left: 50px"&gt;&lt;/i&gt;&lt;span style="margin-right: 100px"&gt;2332&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;2&lt;/th&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td style="width: 300px"&gt;&lt;i class="fa fa-caret-down" style="float:left; margin-left: 50px"&gt;&lt;/i&gt;&lt;span style="margin-right: 100px"&gt;1.2&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;3&lt;/th&gt;
            &lt;td&gt;Larry&lt;/td&gt;
            &lt;td&gt;the Bird&lt;/td&gt;
            &lt;td&gt;&lt;i class="fa fa-caret-down" style="float:left; margin-left: 50px"&gt;&lt;/i&gt;&lt;span style="margin-right: 100px"&gt;1.2&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a better way of doing this without the folding?</p>