Q:

Clickable image inside input field - position not working

I know this question has been asked and aswered before, but for some reason, the answers are not working for me; so any help is much appreciated.
I'm creating a hybrid mobile app and I need to add an clickable icon (SVG) inside an input field.  Even though I have managed to add the icon, when I test my design in different screens, the icon doesn't not respect the position I need it to be in.
Here are some shots: This is how it's supposed to look in all screens and this is what it looks like in landscape mode, for example.
Here's my code: https://codepen.io/paulamourad/pen/djXvxq
CSS:
.wallet-body {
    width: 100%;
    margin: 0 auto;
}

.form-group {
    position: relative;
}

.form-group input {
    border: 1px solid #2C2C2C;
    height: 48px;
}

.qr-scanner-img {
    float: left;
    width: 11%;
    margin-top: -39px;
    margin-left: 120px;
    position: relative;
}

HTML:
<div class="wallet-body">
   <form class="form-pagar">
      <div class="form-group">
         <input type="amount" class="form-control" id="amount" placeholder="Monto">
      </div>
      <div class="form-group">
         <input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
         <a href="#">
         <img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
         </a>
      </div>
   </form>
</div>

A:

.wallet-body {
    width: fit-content;
    margin: 0 auto;
    float: left;
}
.form-group{
    position: relative;
}
.form-group input {
    border: 1px solid #2C2C2C;
    height: 48px;
}

.qr-scanner-img {
    width: 11%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
    <div class="wallet-body">
                <form class="form-pagar">
                  <div class="form-group">
                    <input type="amount" class="form-control" id="amount" placeholder="Monto">
                  </div>
                  <div class="form-group">
                    <input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
                        <a href="#">
                        <img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
                    </a>
                  </div>
                </form>
            </div>

