how to make an element fixed when the window resizes - html

Question

I have a registration form where the there is icons in the form input. When i resize the window it displaces (squeezes) which is very annoying can anyone tell me what should i do to make it fixes in the place where it is.
#username-logo {
position: relative;
float: left;
top: 40px;
left: 15%;
}
#password-logo {
position: relative;
float: left;
top: 40px;
left: 15%;
}
#email-logo {
position: relative;
float: left;
top: 40px;
left: 15%;
}
<form id="form-container">
<h1 id="linklist">Register</h1>
<input type="text" name="username" id="username" placeholder="Username" required="required">
<i class="fas fa-user" id="username-logo"></i>
<input type="password" name="password" id="password" placeholder="Password" required="required">
<i class="fas fa-lock" id="password-logo"></i>
<input type="email" name="email" id="email" placeholder="Email" required="required">
<i class="fas fa-envelope" id="email-logo"></i>
<input type="submit" name="submit" id="submit" value="Register">
</form>

Answer 1

Wrap the icon and input and from there you can style it easier. The placement of the icon all depends on the design you have.
.register-form {
display: flex;
flex-wrap: wrap;
max-width: 20rem;
}
.input-container {
display: flex;
}
.input-container input {}
.input-container i {}
<h1 id="linklist">Register</h1>
<form id="form-container" class="register-form">
<div class="input-container">
<input type="text" name="username" id="username" placeholder="Username" required="required">
<i class="fas fa-user" id="username-logo"></i>
</div>
<div class="input-container">
<input type="password" name="password" id="password" placeholder="Password" required="required">
<i class="fas fa-lock" id="password-logo"></i>
</div>
<div class="input-container">
<input type="email" name="email" id="email" placeholder="Email" required="required">
<i class="fas fa-envelope" id="email-logo"></i>
</div>
<button type="submit" class="button">Register</button>
</form>

Answer 2

Put your container position: relative and logo position: absolute and reposition using left/right/top/bottom .
This way the logo's will be positioned according to container (here input) not according to body and will not displaces on resize if used correctly