Form Styling When Hovering Input Fields Is Glitchy(?)

Question

I have been styling a form and trying to replicate Taylor Wimpey's search form on their home page; where you hover over the inputs and they expand to give more room, and specifically when you hover over the search button that it also expands and the word "Search" appears.

My issue is that when I hover over my inputs, the search button glitches/does not smoothly move. My second issue, is that when I unhover the search button, the word "search" goes to the bottom of the button which appears unnatural.

This is my html code:

        <div class="row justify-content-center">
            <div class="col-lg-9 col-md-11 col-sm-11 search-wrapper">
                <form class="home-finder-search">
                    <div class="flex-container">
                        <!-- <div>
                            <label for="locationInput">Location</label>
                            <input type="text" class="form-control search-field flex-item" id="locationInput" placeholder="e.g. London, NW3, Hackney">
                        </div> -->
                        <input type="text" class="form-control search-field flex-item" id="locationInput" placeholder="e.g. London, NW3, Hackney">
                        <input type="text" class="form-control search-field flex-item" id="priceInput" placeholder="Any price">
                        <input type="number" class="form-control search-field flex-item" id="bedroomInput" placeholder="At least one">
                        <!-- <div class="flex-item search-button-wrapper">
                            <button type="submit" class="btn btn-primary my-2 search-button">Search</button>
                        </div> -->
                        <div class="flex-item search-button-wrapper">
                            <button type="submit" class="btn btn-primary my-2 search-button">
                                <img src="../img/magGlass20x20.svg" alt="Magnifying Glass" class="magnifying-glass-icon"  height="25px">
                                <div class="text-wrapper">
                                    <span class="search-text">Search</span>
                                </div>
                            </button>
                        </div>
                    </div> 
                    
                    
                </form>
            </div>
        </div>
    </div>

and this is my css code:

body {
    background-color: black!important;
}

.search-wrapper {
    background-color: white;
    border-radius: 16px;
    transform: translateY(50%);
}

.home-finder-search {
    margin: 0 auto;
    padding: 12px 0px 12px 0px;
}

.search-field {
    border: none!important;
    border-radius: 0!important;
    border-right: 1px solid #e0d7d7!important;
    background: transparent;
    color: white;
    transition: flex 0.5s;
}

.search-field::placeholder {
    color: white;
}

/* Additional CSS */
.flex-container {
    display: flex;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
    transition: flex 0.2s ease-out!important;
}

.flex-item:hover {
    flex: 2;
}

#bedroomInput {
    border: 0!important;
    padding-right: -60px!important;
}

#locationInput {
    
}

#locationInput:hover {
    border-right: 0.5px solid rgba(0,0,0,0.5)!important;
    border-radius: 8px!important;
    box-shadow: 5px 0 2px -2px #00000000!important;
}

#priceInput:hover {
    box-shadow: 5px 0 2px -2px #00000000, -5px 0 2px -2px #00000000!important;
    border-right: 0.5px solid rgba(0,0,0,0.5)!important;
    border-left: 0.5px solid rgba(0,0,0,0.5)!important;
    border-radius: 8px!important;
}

#bedroomInput:hover {
    border-radius: 8px!important;
    border-left: 0.5px solid rgba(0,0,0,0.5)!important;
    box-shadow: -5px 0 2px -2px #00000030;

}


.search-button-wrapper {
    flex: 0.1;
    display: flex;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    transition: flex 0.6s ease-out!important; /* Changes here */
    
}

.search-button-wrapper:hover {
    flex: 1.5;
    transition: flex 0.2s ease-out!important;
}

.search-button-wrapper button {
    position: absolute;
    right: 0;
}

.search-button {
    display: flex;         /* add this */
    align-items: center;   /* add this */
    justify-content: center; /* add this */
    width: 70px;
    height: 50px;
    transition: width 0.2s ease-out!important;
}

.search-button:hover {
    width: 50%; /* adjust this value to your preference */
}

.search-text {
    opacity: 0;
    /* transition: opacity .6s cubic-bezier(.64,.04,.35,1); */
    transition: opacity 0s, max-width .6s cubic-bezier(.64,.04,.35,1); /* Transition set to 0s for opacity, animation for max-width */
    font-weight: 700!important;
    margin-left: 10px;
}

.search-button-wrapper:hover .search-text {
    opacity: 1;
    transition: opacity .6s cubic-bezier(.64,.04,.35,1), max-width .6s cubic-bezier(.64,.04,.35,1); /* Transition back to original */
}

.text-wrapper {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    transition: max-width 0.6s cubic-bezier(.64,.04,.35,1);
    max-width: 0;
}

.search-button-wrapper:hover .text-wrapper {
    max-width: 5em; /* adjust this value as needed */
}

Note: some styling for the body such as "background-color: black" is just to make the form visible while coding. This also goes for my use of "top" to move the form down.

Any help is massively appreciated as I am struggling with this.

Kind regards