Form check markup

This fixes #23426 (closed), but might constitute as a breaking change.

What changes

Validating an input within our .form-check component is straightforward—it'll handle :valid and :invalid with ease. However, styling the label's text based on the input's state is another thing. Let's look at what we have now:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input">
    Check me out
  </label>
</div>

With the above HTML, you cannot style Check me out in CSS based on .form-check-input's state. To make that happen, we need a sibling element to style, something like:

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input">
    <span class="form-check-description">Check me out</span>
  </label>
</div>

That's what this PR changes all our checkboxes and radios to. This matches custom forms more and enables CSS-only validation of checkboxes/radios.

Breaking or non-breaking?

So, why the question of maybe breaks backward compatibility? It's not strictly required. Right now, there's no need to include it for anything but validation. However, it could help improve styling of disabled inputs as well. Here's the current CSS for disabled .form-checks, which requires a parent class:

https://github.com/twbs/bootstrap/blob/5b8738afc1c7e746d6f08ec0f25f83603307de45/scss/_forms.scss#L218-L228

With this change, we could do:

.form-check {
  position: relative;
  display: block;
  margin-bottom: $form-check-margin-bottom;
}

.form-check-input:disabled {
  + .form-check-description {
    color: $text-muted;
  }
}

---

Thoughts?