CSS: Transparent Image overlay input field

Question

I have been trying to position this transparent logo on the input field but I am not able to get it sit on left side. can anyone please guide me how would I be able to achieve this? Thanks in advance:)

<div className={classes.formClass}>
        <h3 className={classes.active}>Sign Up</h3>
        <h3 className={classes.notActive} onClick={this.switchAuthModeHandler}>
          Log In
        </h3>
        <div>
          {/* <img src={require("../../assests/ic_username@2x.png")} alt="" /> */} [the image logo]
          <input
            type="text"
            placeholder="Username"
            name="username"
            onChange={(event) => this.inputChangedHandler(event, "username")}
          />
        </div>
</div>

CSS: 
.formClass {
  display: block;
  position: relative !important;
  margin-left: auto;
  margin-right: auto;
}

.formClass img {
  position: absolute;
  margin-left: 50%;
  margin-right: 30%;
  top: 12px;
  height: 24px;
  width: 24px;
  left: 20px;
  right: 10px;
}

.formClass div input {
  height: 52px;
  width: 360px;
  border-radius: 0px;
  opacity: 30%;

  margin-bottom: 12px;
}

How it should be How it is

Answer 1

Add position:absolute to your image class.It will position image inside your input same as you required.