title: How to render 2 html tables next to each other?
body: <p>I'm trying to render 2 tables next to each other horizontally like this:</p>
  
  <p>|Table 1|     |Table 2|<br>
  |---------|   |----------|<br>
  |---------|   |----------|<br>
  |---------|   |----------| </p>
  
  <p><strong>What is proper way to do that?</strong></p>
  
  <hr>
  
  <p>Currently, I got this html:</p>
  
  <pre><code>&lt;div style="vertical-align:top;"&gt;
   &lt;table style="display:inline-table;"&gt;
    ...1st table
   &lt;/table&gt;
   &lt;table  style="display:inline-table;"&gt;
    ...2nd table
   &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Having troubles with vertical alignment, it renders out like this (table#2 has 1 less row):</p>
  
  <p>|Table 1|<br>
  |---------|   |Table 2|<br>
  |---------|   |----------|<br>
  |---------|   |----------| </p>
  
  <p>I would like it to start from top.</p>
  
  <p>P.s. There is <a href="https://stackoverflow.com/questions/6548880/css-positioning-tables-next-to-each-other">related question</a>, but I don't want to wrap it around w/ divs.</p>