Place 2 PHP generated HTML tables side by side - php

Question

I have generated 2 HTML tables with PHP. The first table is always ontop of the 2nd table. I can't seem to get them to be side by side. the 2nd one is always under the first table.
I've also tried adding an html style of float left as well as inline in the html for the tables and it still doesn't come out side by side. Any help would be greatly appreciated!
//add table for bids and asks
function build_table($bidarray){
// start table
$html = '<table style="display: inline-block;">';
// header row
$html .= '<tr>';
foreach($bidarray[0] as $key=>$value){
$html .= '<th>' . htmlspecialchars($key) . '</th>';
}
$html .= '</tr>';
// data rows
foreach( $bidarray as $key=>$value){
$html .= '<tr>';
foreach($value as $key2=>$value2){
$html .= '<td>' . htmlspecialchars($value2) . '</td>';
}
$html .= '</tr>';
}
// finish table and return it
$html .= '</table>';
return $html;
}
$bidarray = array(
array('Company'=>'cardsltd', 'Min Qty'=>'5', 'Max Qty'=>'10', '$/box'=>'5.00'),
);
$askarray = array(
array('Company'=>'comp', 'Min Qty'=>'4', 'Max Qty'=>'9', '$/box'=>'4.00'),
);
echo build_table($bidarray) . build_table($askarray) ;

Answer 1

You need to use <div>s.
Take a <div>
Put two <div>s in it containing a table each.
<div>
<div style="float:left; width: 49%">
<table>
...
</table>
</div>
<div style="float:left; width: 49%">
<table>
...
</table>
</div>
</div>
This will put your tables side by side.
Also, we can change/adjust/manage widths.
49% is just for demo purposes.

Answer 2

PHP Code:
//define class for table
$html = '<div class="half-width"><table> ...';
CSS code:
.half-width
{
position: relative;
width: 100%;
padding-right: 15px; /*optional*/
padding-left: 15px; /*optional*/
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
Also you can add float:right;width:50% for defined class (here class name is half-width)