Two legends in a fieldset

Question

You can't have two legends for a given fieldset, but is there a way to get a legend effect without using the <legend> tag?

<!-- left legend -->
<fieldset>
    <legend>
        Some Text
    </legend>
</fieldset>

I can add align=right 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 a legend to the left, and something like a legend to the right. Something like the image below.

How can I accomplish this using HTML and CSS? Here's a Fiddle, 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.

Update

Here's some code I'm working with :

#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;
}

<fieldset class="grey" id="shifter">
  <legend>
    Title
  </legend>
  <div id="cataright">
    Sort by
    <select id="sort" onchange="sort();">
      <option value="original">Release Date</option>
      <option value="popularity">Popularity</option>
      <option value="rating">Highest Rated</option>
    </select>
  </div>
</fieldset>

Answer 1

You can do that by adding an extra element and positioning it absolutly in the <fieldset> :

fieldset {
  position: relative;
}
.legend2 {
  position: absolute;
  top: -0.2em;
  right: 20px;
  background: #fff;
  line-height:1.2em;
}

<fieldset>
  <legend>
    Some Text
  </legend>
  <div class="legend2">Some other Text</div>
</fieldset>

Answer 2

You can use :after pseudo selector to achieve this. SEE THE DEMO. This way, you don't have to use any additional html tags.

fieldset {
    position: relative;
}

fieldset:after {
    content: "Some Text";
    position: absolute;
    margin-top: -25px;
    right: 10px;
    background: #fff;
    padding: 0 5px;
}

Answer 3

I had the same problem, but the answers here did not satisfy me. So I developed my own solution.
My solution is based on div-Tags. Just play with the width of the legend Tag and the width of the div Tag. Also you can set more Text.
Beneath you can find three different examples.

<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 100%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 359px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 81%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; height: 1px; background-color: black; width: 78px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 186px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>
<fieldset style="border: 1px solid black; width: 500px; height: 100px; margin: 1em auto;">
	<legend style="width: 90%; padding: 0;">
		<div style="display: inline-block; line-height: 1.2;">
			<div style="float: left; height: 1px; background-color: black; width: 39px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Legend</div>
			<div style="float: left; height: 1px; background-color: black; width: 88px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">More Stuff</div>					
			<div style="float: left; height: 1px; background-color: black; width: 102px;  margin-top: 11px;"></div>
			<div style="float: left; padding: 0 5px;">Other Stuff</div>
		</div>
	</legend>	
</fieldset>			

Note: display inline-block and line-height: 1.2 are necessary for cross browser compatibility.

Answer 4

Ok, I've managed to do it without the background color "hack", or using the fieldset tag, The only caveat is that trying to get rounded corners may be a bit tricky.

Basically our "panel" will be a box where we draw its left, bottom and right borders. Then our "panel-title" element will be absolutely positioned at the top of the panel.

Each panel span takes up exactly 50% of the panel width and uses display flex to do the magic. For the first span, we use the before element to draw the border 1em in width from the left-hand side, and then the after element we set the "flex-grow: 1" to tell it to take up the rest of the space.

Then we do exactly the same for the last span except having the width and flex-grow properties reversed. i.e. the last span's before element will instead be set to flex-grow: 1 and its after element will have a width of 1em.

Anyway, check the snippet below.

* { 
  box-sizing: border-box;
}
body {
  background:url(https://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
  margin: 0;
  font-family: 'Roboto Slab';
}

.panel {
  background: rgba(0,0,0,0.8);
  width: 75vw;
  height: -webkit-max-content;
  height: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  padding: 0.5em 1em;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  
}
.panel-title {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  height: 30px;
  line-height:30px;
  font-size: 30px;
  white-space: nowrap;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}
.panel-title > span {
  display: flex;
  width: 50%;
}
.panel-title > span:before,
.panel-title > span:after {
  content: '';
  border-bottom:1px solid #fff;
  margin-bottom:5px;
  align-self:flex-end;
}
.panel-title > span:first-child:before {
  width: 1em;
  margin-right: 5px;
}
.panel-title > span:first-child:after {
  margin-left: 5px;
  flex-grow: 1;
}
.panel-title > span:last-child:before {
  flex-grow: 1;
  margin-right: 5px;
}
.panel-title > span:last-child:after {
  width: 1em;
  margin-left: 5px;
}

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

<div class='panel'>
  <DIV class='panel-title'>
    <SPAN>Foo Bar</SPAN>
    <SPAN>Snee</SPAN>
  </DIV>
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere tempus mauris at tincidunt.</P>
  <P>Phasellus facilisis leo tortor, nec molestie purus dignissim non. Integer massa turpis, porta sed erat sed.</P>
</div>

Answer 5

Here is a responsive version using Bootstrap.

The custom CSS pushes the second legend up into place.

.legend {
  position: relative;
  top: -3.4em;
  margin-bottom: -3.4em;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<fieldset class="container border">
  <legend class="float-none w-auto p-2">Legend 1</legend>
  <div class="row legend">
    <div class="col-12">
      <span class="p-2 bg-white float-end">
          Legend 2
          <select></select>
        </span>
    </div>
  </div>
</fieldset>