Display Flex, I need to put an icon behind the text

Issue

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;

with Flex and content-aligin: center;

Solution

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 😁

Answered By - Ori Guy