Nested input and select box with hover transition - css

Question

I have a select box that sits directly next to an input box, (see relevant snippet below).
Currently, two seperate transition animations play in order to display both boxes on hover.
I would like to only use a single transition to display both boxes on hover.
Is there a cleaner way to do this? Could different positioning properties help me? Thanks in advance!
html, body {
background-color: rgba(64, 124, 165, 1);
}
.quick-search-container {
cursor: pointer;
width: 350px;
vertical-align: top;
white-space: nowrap;
position: relative;
top: -5px;
float: left;
}
.quick-search-container input#search {
width: 20px;
height: 30px;
background: rgba(64, 124, 165, 1); /*replacement*/
border: none;
font-size: 10pt;
float: right;
color: #262626;
padding-right: 35px;
padding-left: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #000;
-webkit-transition: width .55s ease, background-color .55s ease;
-moz-transition: width .55s ease, background-color .55s ease;
-ms-transition: width .55s ease, background-color .55s ease;
-o-transition: width .55s ease, background-color .55s ease;
transition: width .55s ease, background-color .55s ease;
}
.quick-search-container input#search {
color: #65737e;
border: none;
}
.quick-search-container .icon {
position: absolute;
vertical-align: text-top;
right: 0;
margin-right: 10px;
margin-top: 6px;
color: #333;
font-size: 18px;
}
.quick-search-container .selector {
float: right;
vertical-align: text-top;
margin-right: 10px;
margin-top: 6px;
color: #ffffff;
font-size: 18px;
}
.quick-search-container input#search:focus,
.quick-search-container input#search:active,
select#selector:active {
outline: none;
}
.quick-search-container:hover input#search {
outline: none;
width: 180px;
background: #fff;
}
.quick-search-container:hover select#selector {
outline: none;
width: 100px;
}
.quick-search-container:hover .icon {
color: rgba(64, 124, 165, 1); /*replacement*/
}
.quick-search-container .selector {
margin-right: 0px;
margin-top: 0px;
transition: width .22s ease, background-color .55s ease;
}
.quick-search-selector {
margin-right: 0px;
margin-top: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: none;
height: 30px;
width: 0px;
color: black;
transition: width .55s ease, background-color .55s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<a class="quick-search-container">
<span class="icon">
<i (click)="initQuickSearch()" class="fa fa-search"></i>
</span>
<input type="search" id="search" placeholder="Search...">
<span class="selector">
<select class="quick-search-selector" id="selector">
<option>VIN</option>
<option>Make</option>
<option>Model</option>
<option>Cow</option>
</select>
</span>
</a>

Answer 1

Just wrap input and select boxes into a container and set animations on it, see the simplified demo by using flexbox below. You can adjust the style as needed.
jsFiddle
html {
background-color: rgba(64, 124, 165, 1);
}
.quick-search-container {
position: relative;
width: 250px;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px solid;
}
.input-select {
width: 0;
overflow: hidden;
transition: width 1s;
display: flex;
}
.quick-search-selector {
width: 30%;
height: 30px;
}
.quick-search-input {
width: 70%;
-webkit-appearance: none;
outline: 0;
height: 30px;
}
.quick-search-container:hover .input-select {
width: 100%;
}
.quick-search-button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-size: 16px;
background: none;
border: 0;
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<a class="quick-search-container">
<span class="input-select">
<select class="quick-search-selector" id="selector">
<option>VIN</option>
<option>Make</option>
<option>Model</option>
<option>Cow</option>
</select>
<input type="search" class="quick-search-input" placeholder="Search..." id="search">
</span>
<button class="quick-search-button">
<i class="fa fa-search"></i>
</button>
</a>