CSS Animating search box with flex box - html

Question

I have been trying to get this layout to animate the search box when clicking on the search icon. It kind of works, except for two things. When the animation begins, the search icon quickly moves to the left where I'd like it to stay put and the search box extend out to the left. That would then push the logo over at the same time the logo switches to the small version.
Any guidance would be appreciated. Here is a JSFIDDLE and the code:
HTML:
<button class="hamburger hamburger-cancel" id="menu-trigger">
<span class="icon"></span>
</button>
<a id="site-logo" data-cy="site-logo" href="http://www.website.local">
<img class="full-logo" src="https://www.tracetronic.com/cms/data/img/inhalte/Logos_TraceTronic/Logo_TEST-GUIDE_rgb_SCREEN.jpg" alt="Engineering360 Logo">
<img class="logo-kite" src="http://i.imgur.com/w4MxJnp.png" alt="Engineering360 Logo Kite">
</a>
<form id="global-search-form" action="/search" data-cy="global-search-form">
<input class="search-box catcomplete" type="text" name="query" required="" value="" data-cy="global-search-box">
<input type="hidden" name="newSearch" value="new">
<input class="submit" type="submit" value="">
</form>
<div class="header-reg-links">
<img id="reg-trigger" data-cy="profile-popup-trigger" src="https://www.freeiconspng.com/uploads/profile-icon-9.png">
</div>
</div>
</header>
CSS/SCSS:
header {
background: black;
background-size: cover;
box-sizing: border-box;
padding: 0 .5em;
position: relative;
width: 100%;
z-index: 10;
#header-content {
align-items: center;
display: flex;
flex-flow: row nowrap;
margin: 0 auto;
max-width: 1140px;
#site-logo {
margin: .5em 2em;
min-width: 0;
flex-grow: 1;
text-align: center;
.logo-kite {
display: none;
}
img {
height: auto;
width: 5em;
}
}
.header-reg-links {
align-items: center;
display: flex;
position: relative;
#reg-trigger {
cursor: pointer;
margin-left: auto;
min-width: 0;
transition: opacity .3s;
width: 2.25em;
height: 1.75em;
padding: 1em .25em;
&:hover {
opacity: 0.9;
}
}
}
#global-search-form {
align-items: center;
display: flex;
flex-flow: row nowrap;
flex-grow: 0;
font-size: 15px;
min-width: 0;
padding: 0 2em;
margin: .5em 0;
padding: 0 .5em;
.nav-search-dropdown {
display: none;
}
.search-box {
background: #fbfbfb;
box-sizing: border-box;
border: 0;
font-size: 15px;
height: 2.25em;
line-height: 2.25em;
margin: 0;
min-width: 0;
flex: 0;
max-width: 40em;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
transition: width 1s;
width: 0;
}
.submit {
border: 0;
border-radius: 0 3px 3px 0;
box-sizing: border-box;
cursor: pointer;
height: 2.25em;
font-size: 15px;
min-width: 0;
background: url("https://vignette.wikia.nocookie.net/deusex/images/9/9b/Magnifying_glass_icon.png/revision/latest?cb=20141205155051&path-prefix=en") center center / 1.65em no-repeat;
padding: 0;
width: 2em;
}
}
&.search-open {
#site-logo {
flex: 0 0 2em;
margin: 0 .5em;
.logo-kite {
display: block;
width: 2em;
}
.full-logo {
display: none;
}
}
#global-search-form {
flex: 1 1 0;
margin: 0;
padding: 0;
width: 16em;
.search-box {
flex: none;
padding: .25em .5em;
width: 90%;
}
.search-trigger {
display: none;
}
}
}
}
#menu-trigger {
background: transparent;
border: 0 none;
cursor: pointer;
display: inline-block;
height: 1em;
outline: none;
padding: 0;
transition: transform .2s ease-in-out;
vertical-align: middle;
flex: 0 0 1.25em;
font-size: 1.5rem;
margin: 0 .25em;
width: 1.5em;
&:before, &:after {
content: "";
}
&:before, &:after, .icon {
background: #FBFBFB;
border-radius: .05em;
display: block;
height: .1em;
margin: 0 0 .3em;
transition: transform .2s ease-in-out;
width: 100%;
}
&.menu-open:before {
transform: translateY(.4em) rotate(135deg);
}
&.menu-open .icon {
transform: scale(0);
}
&.menu-open:after {
transform: translateY(-.4em) rotate(-135deg);
}
}
}
JQUERY:
$(function() {
// Click event for profile icon.
$("#reg-trigger").click(function() {
$("#header-content .header-reg-links").toggleClass("active");
$(document).on("click.document", function(e) {
var container = $("#header-content .header-reg-links");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass("active");
// remove the click event on the document when it's no longer needed.
$(document).off("click.document");
}
});
})
// Opens main menu
$("#menu-trigger").click(function() {
$("html, #menu-trigger, #site-nav").toggleClass("menu-open");
});
// Header search bar toggle
$("#global-search-form input.submit").click(function(e) {
console.log($("#global-search-form input.search-box").val());
if ($("#header-content").hasClass("search-open")) {
if ($("#global-search-form input.search-box").val() == "") {
e.preventDefault();
$("#header-content").toggleClass("search-open");
} else {
return true;
}
} else {
e.preventDefault();
$("#header-content").toggleClass("search-open");
}
});
});