title: Displaying two legends inline in html form
body: <p>I'm trying to add two legends at the top of the form. I need both legends to display inline as opposed to one stacked above the other.</p>
  
  <p>Like so:</p>
  
  <p>-----legendOne---LegendTwo-----</p>
  
  <p>How do I achieve that layout in CSS?</p>
  
  <p>Here's the current CSS setting: </p>
  
  <pre><code>legend {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    margin-left: 25px;
    color: #FFFFFF;
    background: #00BCE6;
    border: 1px solid #00BCE6;
    padding: 5px 15px;
  }
  </code></pre>