I know the issue of adding an icon inside of a React text input has been covered in various questions in the past (for example: https://stackoverflow.com/a/43723780/5968663) but I can't find one that addresses my issue:

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: red;
  padding: 4px;
}

.input {
  height: 50px;
}

<div class="wrapper">
  <div class="icon"></div>
  <input class="input"></input>
</div>  

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have created a wrapper and trying to use flex to position the icon "inside" of the input (on the left side) - but I've been unable to find a solution. Can anyone see where I might be going wrong?

CodePudding user response：

I think you should end up with something similar to:

.wrapper {
  position:relative;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: red;
  padding: 4px;
  position: absolute;
  box-sizing:border-box;
  top:50%;
  left:2px;
  transform: translateY(-50%);
}

.input {
  height: 50px;
  box-sizing:border-box;
  padding-left: 1.5rem;
}

<div class="wrapper">
  <div class="icon"></div>
  <input class="input"></input>
</div>  

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Also, you don't need flexbox to doing that.