Problem positioning an icon in a search bar

In this div I have an input for my search bar, an icon that performs the search and an icon that deletes the text the user has typed.
I have a problem with the positioning of my delete icon, it doesn’t stay in the search bar and goes out to the right depending on the size of the screen.
I’d like it to stay in the search bar. Do you know how to do this?

This code looks good to me, but it doesn’t do what I want it to do :

        <div class="col-lg-4 col-sm-4 searchbarDiv" style="margin: 0 auto; position: relative;">
            <cc1:PSTextBox runat="server" ID="edbName" AutoCompleteType="Search" MLNullKey="PANELADMINSOFTWARE_TITLE" MLToolTipKey="RQSearchTooltip" CssClass="form-control searchbar" Style="padding-left: 40px; padding-right: 40px;" />
            <span id="edbNameIcon" class="material-icons searchIcon" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%);">search</span>
            <span id="clearSearch" class="material-icons searchDelete" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%);">close</span>
        </div>