How do fix the search icon position use in the navbar?

I'm designing a navbar for a website I'm working on. I am having the problem that can be seen in the pictures. 1080p resolution works smoothly on tablet or mobile phone screens. but when the resolution starts to shrink a little, the search component icon in the navbar is not in the same plane as the search box. how can i solve this? thanks. Note: Im using bootstrap 4.5 library for designing.

/* ... */

/* Navbar Search */

.searchbar {
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
}

.search_input {
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    caret-color: transparent;
    line-height: 40px;
    transition: width 0.4s linear;
}

.searchbar:hover>.search_input {
    padding: 0 10px;
    width: 12rem;
    caret-color: auto;
    /* changed */
    transition: width 0.4s linear;
}

.searchbar:hover>.search_icon {
    background: white;
    color: black;
    /* #e74c3c */
}

.search_icon {
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
}

/* ... */

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- ... -->
</head>
<body>
    
    <!-- ... -->
    <nav>
        <!-- ... -->
        <li class="nav-item">
            <div class="container h-100">
                <div class="d-flex justify-content-center h-100">
                    <div class="searchbar">
                        <input class="search_input" type="text" name="" placeholder="Search...">
                        <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
                    </div>
                </div>
            </div>
        </li>
        <!-- ... -->
    </nav>
    <!-- ... -->
    
</body>
</html>

Solution

Just add display: flex to your class .searchbar. Or best way would be to use position: absolute to the search icon.