Issue with input-group and form-floating validation

[Mole1424]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Form input validation produces UI erros when acting on input-group fields that have form-floating labels

As shown by #34527 (review) any input-group-text elements will expand incorrectly when validation is added to a form-floating div. The proposed fix is to replace the div with a fieldset but this poorly documented.

Furhermore, with this solution, it requires validation divs to be outside of the form with causes the groups to break when validation is shown.

Reduced test cases

<form class="needs-validation" novalidate>
    <div class="input-group">
        <span class="input-group-text">@</span>
        <div class="form-floating">
            <input type="text" name="first" id="first" class="form-control" placeholder="First Name" required>
            <label for="first">First Name</label>
            <div class="invalid-feedback">Please provide a first name</div>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="form-floating">
            <input type="text" name="last" id="last" class="form-control" placeholder="Last Name" required>
            <label for="last">Last Name</label>
            <div class="invalid-feedback">Please provide a last name</div>
            <div class="valid-feedback">Looks good!</div>
        </div>
    </div>
    <input type="submit" value="Submit" class="btn btn-primary">
</form>

document.addEventListener("DOMContentLoaded", function () {
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.classList.add('was-validated');
        }, false);
    })
});

Alternative HTML using fieldset

<form class="needs-validation" novalidate>
    <div class="input-group">
        <span class="input-group-text">@</span>
        <fieldset class="form-floating">
            <input type="text" name="first" id="first" class="form-control" placeholder="First Name" required>
            <label for="first">First Name</label>
        </fieldset>
        <div class="invalid-feedback">Please provide a first name</div>
        <div class="valid-feedback">Looks good!</div>
        <fieldset class="form-floating">
            <input type="text" name="last" id="last" class="form-control" placeholder="Last Name" required>
            <label for="last">Last Name</label>
        </fieldset>
        <div class="invalid-feedback">Please provide a last name</div>
        <div class="valid-feedback">Looks good!</div>
    </div>
    <input type="submit" value="Submit" class="btn btn-primary">
</form>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.7