Inconsistent checkbox placement when a hidden element is between a legend and .form-check

Created by: tegandbiscuits

• Operating system: macOS 10.15.6
• Browser: Chrome 84.0.4147.105

In the alpha for 5.0.0 when a legend is followed by a hidden element (tested with .d-none and input[type="hidden"]) and div.form-check, then the checkbox will be on the same line as the legend but not the label, and also makes the checkbox not clickable (though it's possible to check by focusing on it). This seems to be the case with normal checkboxes and switches.

Example problematic markup:

<form>
  <fieldset>
    <legend>Unexpected</legend>

    <p class="d-none">Hello</p>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="foo">
      <label class="form-check-label" for="foo">Foo</label>
    </div>
  </fieldset>
</form>

Produces this

I would expect it to lay out like this (and also be clickable)

Code Pen https://codepen.io/tegandbiscuits/pen/poygjPE

The current behavior is also not what happens with checkboxes in Bootstrap 4.

Also this seems to be able to be resolved by wrapping both the hidden element and .form-check in a div.