css responsive-design position css-position textfield

How to Place a "Copy to Clipboard" Icon Inside of an Input Text Box?

I'm designing a password generator and I'm having issues trying to position a "copy to clipboard" icon inside of the input text box where the password will be generated.

I tried placing the text box and icon inside of a flex container so they were centered horizontally. I then tried to "push" the icon inside of the text box using padding-right, but that just pushed both the text box and the icon which I don't want.

Can anyone provide insight?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
  <title>Home</title>
</head>
<body>
  <section id="container">
     <div id="main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id="input-flex-container">
      <input type="text" id="password" readonly>
      <img src="clipboard.png">
    </div>

  </section>
  <script src="script.js"></script>
</body>
</html>



body{
  margin: 0;
}

#container{
  background-color: #1F2937 ;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span{
  color: #4ADF86;
}

h2{
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container{
  display: flex;
  justify-content: center;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus{
  outline: none;
}

Solution

Add position: relative to #input-flex-container to make it the position reference for the image. Then apply the following settings to the image:

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}

This works since you have a fixed width for you input field: The top and right settings will move the top right corner of the image to the center of the (centered) input (actually to the center of the container, but that's the same in this case); the transform: translate(215px, -50%) will move it back vertically by 50% of its own height, thereby centering it vertically within the input, and 215px to the right (= a little less than half the width of the input) to move it towards the right end if the input, but within the field.

body {
  margin: 0;
}

#container {
  background-color: #1F2937;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span {
  color: #4ADF86;
}

h2 {
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus {
  outline: none;
}

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
  <title>Home</title>
</head>

<body>
  <section id="container">
    <div id="main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id="input-flex-container">
      <input type="text" id="password" readonly>
      <img src="clipboard.png">
    </div>

  </section>
</body>

</html>