html table side by side: <table style="float: left;"> does not work

Question

My goal is to put two tables side by side. I have followed following guide: https://stackoverflow.com/a/11690480/2402577

<table style="float: left;">

My example code:

<div class="container" id="coverpage">
  <div class="row">
     <table id="tableblock" class="display" width="100%" style="float:left"><caption><h3>Latest Blocks</h3></table>
     <table id="tabletxs"   class="display" width="100%" style="float:left"><caption><h3>Latest Transactions</h3></table>
  </div>
</div>

Tables output:

As you can see the tables not places side by side. I am not sure what I did wrong. How could I fix this issue?

With valuable advices it seems working but now table's height is pretty small. Done changes: <div class="col-md-10"> added, width removed: This works but now tables height is not symmetric and long enough.

<div class="container" id="coverpage">
  <div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">     
     <table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
     <table id="tabletxs"   class="display"><caption><h3 style="color:black;">Latest Transactions</h3></caption></table>
  </div>
  </div>
</div>

Table Output:

Thank you for your valuable time and help.

Answer 1

You have given table width as 100%; so it will take its full width though you have given float:left

I have reduced your table width by 50%.

<div class="container" id="coverpage">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <table id="tableblock" class="display" width="50%" style="float:left"><caption><h3>Latest Blocks</h3></caption>
  </table>
  </div>
  
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
     <table id="tabletxs"   class="display" width="50%" style="float:left"><caption><h3>Latest Transactions</h3></caption>
     </table>
    </div>
  </div>
</div>