How to set border of another element when an input control has focus?

I have a form with various input controls set up like this:

<div class="form-group mb-3">
    <div class="input-group">
        <input asp-for="Email" class="form-control" />
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-envelope"></span>
            </div>
        </div>
    </div>
    <small>
        <span asp-validation-for="Email" class="text-danger"></span>
    </small>
</div>

And I have a SCSS file that changes the border width on active and focus:

.form-control:focus,
.form-control:focus:active  {
    border-width: $input-focus-width !important;
}

Currently I’m getting this result:

How can I set the border with of the input-group-text element when the input control is active?

>Solution :

You can handle the element immediately placed after .form-control with the following selector:

.form-control:focus + .input-group-append .input-group-text

In your case:

.form-control:focus,
.form-control:focus:active,
.form-control:focus + .input-group-append .input-group-text {
    border-width: 2px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="form-group mb-3">
    <div class="input-group">
        <input asp-for="Email" class="form-control" />
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-envelope">icon</span>
            </div>
        </div>
    </div>
    <small>
        <span asp-validation-for="Email" class="text-danger"></span>
    </small>
</div>