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

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.