revealing search box by expanding horizontally from center while submit button slides to compensate

Hopes and Desires

• To create an .input-group consisting of one input[type=text] and one button[type=button].
• Initially the text-box is to be hidden, leaving only the button visible in the center of the page.
• Once triggered, the text-box is revealed by expanding its width in both directions (left and right), and the button compensates by sliding to the right ; so, the animation appears to be (or is) anchored to the middle of the .input-group.

I know it's been done, but I'm having a very hard time finding an example of it. I can only find examples where the button is off center and stays stationary as the text-box expands out from its side or from underneath.

Using the examples that I have found as a starting board, I've come up with something to this effect:

Using HTML, CSS, JS, JQuery, and Bootstrap4.

HTML

<hr>
<div id='search 'class="search input-group">
    <input id='search-box' type='text' class='form-control search-box' placeholder='I have control issues...' name='q' />
    <span class='input-group-btn'>
        <button type='button' id='search-submit' class='btn text-warning'>GO!</button>
    </span>
</div>
<hr>
<label for='search-box' id='trigger' class='btn btn-link p-a-0'>Hover Here</label>

---

Custom CSS

hr {
    border-color: #8d570c;
    max-width: 60%;
}

.search {
    display: inline-flex;
}

.search-box {
    width: 0;
    font-size: 2rem;
    color: #d38312;
    border: none;
    outline: none;
    top: 0;
    left: 60px;
    background-color: #373A3C;    
}

#search-submit {
    margin: 0 auto;
    background-color: #373A3C;
    padding: .25em 2em;
    font-size: 2rem;
}

---

Script

$(document).ready(function() {
    function revealSearchBox() {
        $('#search-box').animate({width: '60%'});
        $('#search-submit').animate({<!--TODO-->});
    }

    function hideSearchBox() {
        $('#search-box').animate({width: '0'});
        $('#search-submit').animate({<!--TODO-->});
    }

    $('#trigger').mouseenter(revealSearchBox);
    $('#trigger').mouseleave(hideSearchBox);
});

---

I case I haven't included enough code to show what is and isn't working, here's a link to my source code. It very short, only about 160 lines between the three files. Everything is mostly working, but the input-group jumps alignment when the animation is triggered. I don't know why and it makes it difficult to tell if the animation is anchored correctly.

If anyone can see what I'm missing, I'd love the input. Also, if there's a better, more correct approach than the one I've finagled, I'm eager to learn.