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

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.

<div >
   <input  type="text">
    <i ></i>
<div>
  <div >
   <input  type="text">
    <i ></i>
<div>
 <div >
   <input  type="text">
    <i ></i>
<div>

.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;
}

CodePudding user response：

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/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">

<div >
  <input  type="text">
  <i ></i>
</div>
<div >
  <input  type="text">
  <i ></i>
</div>
<div >
  <input  type="text">
  <i ></i>
</div>

I've corrected your codepen code here as well.