How to show the fieldset border through a section of the label?

Question

I have a form with fieldsets, and would like to keep the border, but would like the border to be shown between some text legends. I can't get the legend to have a transparent background to let the border through (to be blocked by some text elements).

legend {
    display:flex;
    justify-content:space-between;
    width: 100%;
    background-color: transparent;
}

legend div {
    background-color: white;
    margin-left:0.5em;
    margin-right:0.5em;
}

<form>
  <fieldset>
    <legend><div>Form Item</div><div>(extra 1)</div></legend>
    <label>Input:</label><input></input>
  </fieldset>
</form>

Answer 1

Extra div hack. If there is a way to do this without the extra div, that would be great.

I guess if I force the fieldset border (chrome's default border is 2px groove threedface), it works ok.

fieldset {
    border: 1px solid black;
}

legend {
    display:flex;
    justify-content:space-between;
    width: 100%;
    position: relative;
}
legend div {
    background-color: white;
    margin-left:0.5em;
    margin-right:0.5em;
}
legend div.line {
    flex: 1 1 auto;
    background-color: transparent;
}

legend div.line:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    top: 50%;
    border-top: 1px solid black;
}

<form>
  <fieldset>
    <legend><div>Form Item</div><div class="line"></div><div>(extra 1)</div></legend>
    <label>Input:</label><input></input>
  </fieldset>
</form>

Answer 2

background can approximate this without an extra div. You simply need to find the correct color:

fieldset {
  border: 1px solid black;
}

legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(black 0 0)center/100% 1px no-repeat;
}

legend div {
  background-color: white;
  padding:0 0.5em;
}

<form>
  <fieldset>
    <legend>
      <div>Form Item</div>
      <div>(extra 1)</div>
    </legend>
    <label>Input:</label><input>
  </fieldset>
</form>