title: Align two divs to be side by side and then center both divs horizontally and vertically
body: <p>I tried looking around SO, but I can't really figure out anything that works.</p>
  
  <p>As the title says, I need to align two divs to be centered and side by side.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
  &lt;div id="dashboard" style="width: 70%;"&gt;
  
      &lt;h3 id="dash" style="color:#99FF00; font-family:monospace;"&gt;
  
          &lt;table style="color:#99FF00; font-family:monospace;" cellpadding="7"&gt;
              &lt;tr&gt;
                  &lt;td&gt;generation&lt;/td&gt;
                  &lt;td&gt;1&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;currently living&lt;/td&gt;
                  &lt;td&gt;&lt;p id="initial_current"&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;recently newborn&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;recently died&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;recently surviving&lt;/td&gt;
                  &lt;td&gt;n/a&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
  
          &lt;table style="color:#99FF00; font-family:monospace;" cellpadding="7"&gt;
              &lt;tr&gt;
                  &lt;td&gt;total living&lt;/td&gt;
                  &lt;td&gt;&lt;p id="initial_total"&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;total newborns&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;total deaths&lt;/td&gt;
                  &lt;td&gt;0&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;total survived&lt;/td&gt;
                  &lt;td&gt;n/a&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;the answer to life&lt;/td&gt;
                  &lt;td&gt;?&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Basically, the 'wrapper' is the parent div. I want to center 'dashboard' and 'board'. I hava javascript generating the text within 'board'.</p>
  
  <p>I roughly want it looking like this:</p>
  
  <p><img src="https://i.stack.imgur.com/kXRI6.png" alt="enter image description here"></p>