Display Flex bug

I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.

#autocomplete a {
        font-weight: bold;
        text-decoration: none;
        color: #111;
        padding: 0.2rem 0.5rem;
        border-radius: 20px;
        align-items: center;
        display: flex;
    }
    
#autocomplete .fa.fa-search {
    padding: 5px;
    float: left;
}

without Flex and content-aligin: center; without Flex and content-aligin: center;

with Flex and content-aligin: center; with Flex and content-aligin: center;

CodePudding user response：

you can try using "flex-direction: row-reverse;" it should reverse your items inside the container with the display flex applied.

have a nice day and good luck