Bootstrap Input width changes when validation classes applied

Question

I have created a search form with form-inline class. When I add is-invalid or is-valid classes to input, input width changed. How to fix width of input control.

<div class="container">
  <div class="row mt-2">
    <div class="col-sm-6 text-left">
    <!-- Other tags... -->
    </div>
    <div class="col-sm-6 text-right">
      <form class="form-inline float-sm-right">
        <select class="form-control mr-1">
        <option>First Name</option>
        <option>Last Name</option>
        <option>Phone</option>
        <option>Email</option>
        </select>
        <input class="form-control mr-sm-1" type="text">
        <button class="btn btn-dark my-2 my-sm-0" type="submit">
        Search
        </button>
      </form>
    </div>
  </div>
</div>

You can see a demo on this link

Answer 1

sorry, in this case, the text in the field will not be displayed correctly. You must correct fields without the is-invalid and is-valid classes

.form-inline input:not(.is-invalid),
.form-inline input:not(.is-valid) {
    padding-right: calc(1.5em + 0.75rem);
}