title: Two legends in a fieldset
body: <p>You can't have two legends for a given fieldset, but is there a way to get a legend effect without using the <code>&lt;legend&gt;</code> tag?</p>
  
  <pre><code>&lt;!-- left legend --&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;
          Some Text
      &lt;/legend&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I can add <code>align=right</code> to the legend tag to make it on the right-hand side, but again, I can't have two legends. I'd like to have <strong>a legend to the left, and something like a legend to the right</strong>. Something like the image below.</p>
  
  <p>How can I accomplish this using <em>HTML</em> and <em>CSS</em>? <a href="http://jsfiddle.net/JPjP3/" rel="noreferrer">Here's a Fiddle</a>, I basically want to combine these two. On the left would be regular legend text, and to the right would be a dropdown if it matters.</p>
  
  <p><img src="https://i.stack.imgur.com/2Ce2d.png" alt="Fieldset with 2 legends"></p>
  
  <p><strong>Update</strong></p>
  
  <p>Here's some code I'm working with :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#shifter {
    position: relative;
  }
  #cataright {
    position: absolute;
    top: -25px;
    right: 20px;
    font-weight: bold;
  }
  .grey {
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    border: solid black 3px;
    border-radius: 7px;
    background-color: #DDDDDD;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="grey" id="shifter"&gt;
    &lt;legend&gt;
      Title
    &lt;/legend&gt;
    &lt;div id="cataright"&gt;
      Sort by
      &lt;select id="sort" onchange="sort();"&gt;
        &lt;option value="original"&gt;Release Date&lt;/option&gt;
        &lt;option value="popularity"&gt;Popularity&lt;/option&gt;
        &lt;option value="rating"&gt;Highest Rated&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>