как выровнять значки внутри текстового поля в React js?

Question

Мне нужно разместить значок почты и значок пароля внутри текстового поля, как правильно выровнять элементы

мой js код:

return (
        <div  className="container">
           <div className="login">
           <img src={pacifyr} alt="logo"/>
           <img src={Envelope} alt="username"/>
           <input placeholder='username' />
           <img src={Lock} alt="username"/>
           <input placeholder='password' />
           </div>
      </div>
    );

Answer 1

* {
  box-sizing: border-box;
}

.row {
  margin: 10px 0;
  width: 100%;
  max-width: 300px;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.row .icon {
  padding: 7px 10px;
  border-right: 1px solid #e0e0e0;
}

.row .icon img {
  width: 26px;
  height: auto;
  display: block;
}

.row input {
  border: none;
  outline: none;
  padding-left: 20px;
}

<div class="row">
  <div class="icon">
    <img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
  </div>
  <input type="text" placeholder="Email/Username">
</div>
<div class="row">
  <div class="icon">
    <img src="https://www.iconninja.com/files/618/860/906/internet-google-message-gmail-computer-email-icon.svg" alt="">
  </div>
  <input type="text" placeholder="Password">
</div>

Answer 2

Вы можете использовать flexbox для макета

<div className="container">
    <div className="login">
    <div className="row">
        <img alt="logo"/>
    </div>
    <div className="row">
        <img className="icon" alt="username"/>
        <input placeholder="username" className="field"/>
    </div>
    <div className="row">
        <img className="icon" alt="password"/>
        <input placeholder="password" className="field"/>
    </div>
    </div>
</div>

И стиль flexbox должен быть таким, как показано ниже

.login {
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row {
    margin: 10px;
    display: flex;
    flex-direction: row;
    height: 30px;
    justify-content: center;
}

.icon {
    width: 50px;
}

.field {
    flex: 1;
}

Answer 3

Для этого можно использовать позиции CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/position)

return (
  <div className="container">
        <div className="login">
          <img src={pacifyr} alt="logo"/>
          <div className="position-relative">
            <img className="position-absolute" src={Envelope} alt="username"/>
            <input placeholder='username' />
          </div>
          <div className="position-relative">
            <img className="position-absolute" src={Lock} alt="username"/>
            <input placeholder='password' />
          </div>
        </div>
  </div>
)
<style>
.position-relative{
  position: relative;
}

.position-relative input{
  padding: 10px 10px 10px 30px;
}

.position-absolute{
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
</style>