There is a flex container (display: flex) with align-items: baseline. Inside, there is a text element (label) and input, which renders .invalid-feedback during validation.
Before the error (.invalid-feedback) appears, the text is aligned with the baseline input — everything is fine.
When .invalid-feedback appears, Firefox recalculates the baseline across the entire height of the flex element, including the internal input blocks.
Visually, this looks like the text has shifted down, although the input remains in place.
In Chrome, there is no such effect: the baseline is calculated based on the input, and the text remains in place.
<div class="hstack gap-2 align-items-baseline">
Assign at least
<div class="form-field required">
<input class="form-control is-invalid">
<div>
<div class="is-invalid"></div>
<div class="invalid-feedback">
<div class="vstack gap-2 align-items-start">
<span>
Required
</span>
</div>
</div>
</div>
</div>
Submissions to
</div>
I tried setting align-items: center, but it looks a little different.
I need to keep the alignment relative to the input.
Your problem is that the class form-control makes the input element display: block. Since it's a block box, it does not create a line box, so there is no baseline to expose. The first baseline that Firefox can see inside the .form-field block is the "Required" text, so the other text vertically aligns with that. To fix, force the input element to be display: inline with the class d-inline.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<div class="hstack gap-2 align-items-baseline">
Assign at least
<div class="form-field required">
<input class="form-control is-invalid d-inline">
<div>
<div class="is-invalid"></div>
<div class="invalid-feedback">
<div class="vstack gap-2 align-items-start">
<span>
Required
</span>
</div>
</div>
</div>
</div>
Submissions to
</div>