Do you have a link to the actual site as I don’t see the same as your screenshots with the posted code.
This is what I see in Firefox, Chrome and Safari on a mac.
(I added my own svg to get the image to show).
What browser versions are you testing on? Or were those screenshots from a browser service?
You are using old techniques such as float which if not controlled explicitly could cause problems. You are also using too many dimensions to make those elements line up. For instance you have an input at 80% width and 5% padding and then you have an image at 25px width 5px margin all around. That all has to add up to less than 100%. If instead you had used flexbox you could make the inputs fill up the available space without explicitly sizing them.
However if you can provide a link to the actual page we should be able to pinpoint your immediate problem.
If for example a user has zoomed their text size only then fixed sizes will break but a more fluid approach allows for more leeway.