title: How to style dt and dd so they are on the same line?
body: <p>Using CSS, how can I style the following:</p>
  
  <pre><code>&lt;dl&gt;
      &lt;dt&gt;Mercury&lt;/dt&gt;
      &lt;dd&gt;Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.&lt;/dd&gt;
      &lt;dt&gt;Venus&lt;/dt&gt;
      &lt;dd&gt;Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.&lt;/dd&gt;
      &lt;dt&gt;Earth&lt;/dt&gt;
      &lt;dd&gt;Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.&lt;/dd&gt;
  &lt;/dl&gt;
  </code></pre>
  
  <p>so the content of the <code>dt</code> show in one column and the content of the <code>dd</code> in another column, with each <code>dt</code> and the corresponding <code>dd</code> on the same line? I.e. producing something that looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/WI4nf.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WI4nf.png" alt="table format"></a></p>