Two legends in the set

Question

You cannot have two legends for a given set of fields, but is there a way to get the effect of a legend without using a tag <legend>?

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

I can add align=rightlegends to the tag to make it on the right side, but again, I cannot have two legends. I would like to have a legend on the left, and something like a legend on the right . Something like the image below.

How can I accomplish this using HTML and CSS? Here's the scenario , I basically want to combine these two. On the left will be the plain text of the legend, and on the right there will be a drop-down list if that matters.

Update

Here is the 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>

Run codeHide result

Answer 1

, <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>

Hide result

Answer 2

- :after. . , - html.

fieldset {
    position: relative;
}

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

Answer 3

, "", fieldset, , .

, "" angular, , . "panel-title" .

50% flex , . before, 1em , after "flex-grow: 1", .,

, width flex-grow. flex-grow: 1, 1em.

, .

* { 
  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>

Hide result

Answer 4

I had the same problem, but the answers here did not satisfy me. Therefore, I developed my own solution.
My solution is based on div tags. Just play with the width of the legendary tag and the width of the div tag. You can also set more text.
Below 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>			

Run codeHide result

Note: inline block display and line height: 1.2 are required for browser compatibility.