I've been trying to figure out how to adjust the position of my invalid tooltips to move a bit to the right and match my input position, but I haven't had any success yet. Here's the image I'm referring to:
https://i.sstatic.net/fovSS.png
Below is the code snippet:
<div class="form-group row">
<label for = "contact" class="col-2 col-form-label">Contact:</label>
<div class="col-4" id="contactContainer">
<div class="flex phone"style="margin-bottom:10px;">
<input style="margin-right: 10px; width: 200px;" id="validationcontact" name="contact" type="text" class="form-control" pattern="\b\d{8}\b" required >
<input type="button" class="ar add" value="Add More Field" style="cursor: pointer;">
<span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>
<div class="invalid-tooltip">
Enter a correct Contact!
</div>
</div>
</div>
========================================================================
I'm seeking help on how to move invalid tooltips. I've tried adjusting the padding-left and padding-right, but it seems to be affecting the button size instead. Does anyone have any suggestions?