hi there! ๐
<div class="wrapper">
<input type="text" required class="data-field" name="" id="field-name" placeholder="First Name">
<img id="error-icon1" src="images\icon-error.svg" class="error-icon" alt="error icon">
<p id="error-msg1" class="error-msgs">First name cannot be empty</p>
</div>
Create a section like this for all the input fields in the form, then apply
.wrapper {
position: relative;
}
.error-icon {
position: absolute;
right: 2rem;
transform: translateY(-50%)
}
You might need to play around with the transform or give right a negative value, but this should position it. ๐
Hope this was helpful ๐
Good luck and happy coding! ๐ช
0