Bootstrap 5 - Floating Labels with input group doesn't line up

Question

I am having some problems getting floating labels within input groups to line up.

<div class="col-6 mb-3">
    <div class="input-group">
        <div class="form-floating">
            <input asp-for="Email" class="form-control" disabled placeholder="@Html.DisplayNameFor(_ => _.Email)" />
            <label asp-for="Email"></label>
        </div>
            <span class="input-group-text text-success font-weight-bold">✓</span>
    </div>
</div>

<div class="col-6 mb-3">
        <div class="form-floating">
            <input asp-for="Input.NewEmail" class="form-control" placeholder="@Html.DisplayNameFor(_ => _.Input.NewEmail)" />
            <label asp-for="Input.NewEmail"></label>
            <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
        </div>
</div>

I want the top field with the tick next to it to stretch out the same width as the field below.

I have created a JSFiddle to demonstrate the problem which can be found here

Answer 1

Use input-group and floating-form on the same div that contains the input..

       <div class="col-6 mb-3">
            <div class="input-group form-floating">
                <input class="form-control" disabled placeholder="Email" />
                <label>Email</label>
                <span class="input-group-text text-success font-weight-bold">✓</span>
            </div>
       </div>
       <div class="col-6 mb-3">
            <div class="form-floating">
                <input class="form-control" placeholder="New Email" />
                <label> New Email</label>
                <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
            </div>
       </div>

Demo