How can i position my Add Minus in form to stay same position in my input?

Issue

I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)

I try many as it seems only ways is a position to be fixed is there another way to do it?

Here the image

<div class="form-group row">
  <label for="validationNumber" class="col-2 col-form-label">Contact:</label>
  <div class="col-4">
    <input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>

    <a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
    <a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
    <div id="new_chq">
    </div>
    <input type="hidden" value="1" id="total_chq">

    <div class="invalid-feedback">
      Enter a correct PhoneNumber!
    </div>
  </div>
</div>

Solution

.flex{display: flex;}

<div class="form-group row">
  <label for="validationNumber" class="col-2 col-form-label">Contact:</label>
  <div class="col-4">
  <div class="flex">
    <input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>

    <a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
    <a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
    </div>
    <div id="new_chq">
    </div>
    <input type="hidden" value="1" id="total_chq">

    <div class="invalid-feedback">
      Enter a correct PhoneNumber!
    </div>
  </div>
</div>

Answered By - Aman Sharma