title: floating text and icon in html table using bootstrap
body: <p>I want the display somehow like,
  <img src="https://i.stack.imgur.com/Tv1hp.png" alt="Image">.</p>
  
  <p>I tried,</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-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"&gt;
  
  
  &lt;table class="table table-striped table-hover table-bordered"&gt;
    &lt;thead class="text-center"&gt;
      &lt;tr&gt;
        &lt;th&gt;Service&lt;/th&gt;
        &lt;th&gt;Quantity&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tr&gt;
      &lt;td&gt;--&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="float-left"&gt;&lt;i class="fas fa-caret-square-down fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="text-center"&gt;8&lt;/span&gt;&lt;span class="float-right"&gt;&lt;i class="fas fa-caret-square-up fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;--&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="float-left"&gt;&lt;i class="fas fa-caret-square-down fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="text-center"&gt;12&lt;/span&gt;&lt;span class="float-right"&gt;&lt;i class="fas fa-caret-square-up fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;--&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="float-left"&gt;&lt;i class="fas fa-caret-square-down fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="text-center"&gt;4&lt;/span&gt;&lt;span class="float-right"&gt;&lt;i class="fas fa-caret-square-up fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;--&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span class="float-left"&gt;&lt;i class="fas fa-caret-square-down fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="text-center"&gt;6&lt;/span&gt;&lt;span class="float-right"&gt;&lt;i class="fas fa-caret-square-up fa-4x"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>