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

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 >
  <label for="validationNumber" >Contact:</label>
  <div >
    <input id="validationNumber" name="phonenumber" type="text"  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 >
      Enter a correct PhoneNumber!
    </div>
  </div>
</div>

CodePudding user response：

.flex{display: flex;}

<div >
  <label for="validationNumber" >Contact:</label>
  <div >
  <div >
    <input id="validationNumber" name="phonenumber" type="text"  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 >
      Enter a correct PhoneNumber!
    </div>
  </div>
</div>