Align Icon to The Right of an Input Field No Matter Width - html

Question

I have three input fields, each with a set width, and want an icon aligned to the right of each.
Right now, it appears it's aligning to the right of the parent container.
Take a look at this codepen to see what I mean.
.input-container {
width: fit-content;
position: relative;
margin-top: 16px;
}
.input-field {
padding: 8px 12px;
border: 1px solid gray;
position: relative;
}
.input-field.short {
width: 100px;
}
.input-field.medium {
width: 200px;
}
.input-field.long {
width: 400px;
}
.icon {
position: absolute;
right: 8px;
top: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<div class="input-container">
<input class="input-field short" type="text">
<i class="fa fa-user icon"></i>
<div>
<div class="input-container">
<input class="input-field medium" type="text">
<i class="fa fa-user icon"></i>
<div>
<div class="input-container">
<input class="input-field long" type="text">
<i class="fa fa-user icon"></i>

Answer 1

You're not closing the div tag that you were using. An opening <div> should be closed by it's closing counterpart </div>. Your code works, it's just that you forgot to use the closing tag for each div you were using. See the snippet below to see what I mean.
.input-container {
width: fit-content;
position: relative;
margin-top: 16px;
}
.input-field {
padding: 8px 12px;
border: 1px solid gray;
position: relative;
}
.input-field.short {
width: 100px;
}
.input-field.medium {
width: 200px;
}
.input-field.long {
width: 400px;
}
.icon {
position: absolute;
right: 8px;
top: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<div class="input-container">
<input class="input-field short" type="text">
<i class="fa fa-user icon"></i>
</div>
<div class="input-container">
<input class="input-field medium" type="text">
<i class="fa fa-user icon"></i>
</div>
<div class="input-container">
<input class="input-field long" type="text">
<i class="fa fa-user icon"></i>
</div>
I've corrected your codepen code here as well.