title: How to align one table to the left and one to the right BOOTSTRAP
body: <p>I have two tables, and I would like to align one to the left and the other to the right - but I am having some trouble.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;?php
  
      print
      "&lt;div class='container'&gt;".
          "&lt;table class='table'&gt;".
          "&lt;tr&gt;".
              "&lt;th class='text-left'&gt;Product Shot&lt;/th&gt;".
              "&lt;th class='text-center'&gt;Product Description&lt;/th&gt;".
              "&lt;th class='text-center'&gt;Quantity&lt;/th&gt;".
              "&lt;th class='text-center'&gt;Total&lt;/th&gt;".
          "&lt;/tr&gt;".
      "&lt;/table&gt;";
  
      print 
          "&lt;tr&gt;".
              "&lt;td&gt;&lt;b&gt;Grand total: &lt;/b&gt;&lt;/td&gt;".
              "&lt;td&gt;&lt;strong&gt;'TOTAL'&lt;/strong&gt;&lt;/td&gt;".
              "&lt;td&gt;".
                  "&lt;a href='#'&gt;&lt;button class='btn btn-success'&gt; Checkout&lt;/button&gt;&lt;/a&gt;".  
  
                  "&lt;a href='remove_all_items.php'&gt;&lt;button class='btn btn-danger'&gt; Remove &lt;/button&gt;&lt;/a&gt;".  
  
                  "&lt;/a&gt;".
              "&lt;/td&gt;".
      "&lt;/tr&gt;";
  
  ?&gt;
  </code></pre>
  
  <p>Is it even possible to have two tables on the same page where one is on the left and the other is on the right and is responsive and scrolls down?</p>
  
  <p>How do I go about achieving this?</p>
  
  <p>Thanks</p>