Display Block and Display None moves objects unintentionally

I am working on the Wikipedia Viewer. Bootstrap 4 got rid of glyphicons, so I kind of just made a clear input field icon with a font awesome icon. It’s probably not best practices, but I am having fun doing it. I have a search icon like the example and then a input field for searching. They both toggle between “display: none” and “display: block” on clicks. When I hit the clear icon, the search icon moves out of it’s original position and I am not sure why. Any help would be appreciated!

That’s working well @camperextraordinaire. Does an empty string set to default?