title: Why won't my <legend> element display inline?
body: <p>I am trying to apply <code>display: inline;</code> to the <code>&lt;legend&gt;</code> element in my <code>&lt;fieldset&gt;</code> element, so that the following <code>&lt;span&gt;</code> will follow on the same line, but my CSS is having no effect.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>legend{
      display: inline;
  }
  span {
      display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
      &lt;legend&gt;Legend&lt;/legend&gt;
      &lt;span&gt;Follower&lt;/span&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/tjnyV/" rel="noreferrer">JSFiddle</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have no control over the HTML; I can only edit CSS</p>