Vertically align icon inside search bar

Question

I know this question seems silly, so I want to apoligize in advance.

I have this input below: where everything seems fine until I add a label on top like below:

This is what I have at the moment:

 .inputWrapper { display: flex; flex-direction: row; align-items: center; height: min-content; position: relative; } .icon { height: 2.1rem; position: absolute; right:0; font-size: fontSizeBig; background: transparent; padding: .6rem; align-items: center; justify-content: center; transition: transform 0.5s ease-out; } 

 <div class='inputWrapper'> <input/> <button class='icon'> <icon/> </button> </div> 

The height here is not helping and I would like to make the icon always hotizontally aligned with the input, without worrying how many divs I can put on top.

Which is the best practice for this problem? Thank you.

Answer 1

Consider putting a wrapper around just the <input/> and the <button class="icon"></button> so that the relative position is not disturbed if you add a label outside of the wrapper:

<div class='outerWrapper'>
    <label><!-- Will not disturb inputWrapper --></label>
    <div class='inputWrapper'>
        <input/>
        <button class='icon'>
            <icon/>
        </button>
    </div>
</div>