Can't control clickable area in CSS transition - html

Question

I am attempting to create a sliding search bar/box that moves on transition when you select the magnifying glass. The issue it that there is only a small space in which you are able to select the magnifying glass to open the search bar. Then, when the search bar has been opened, the space to close it moves back (to the right of the magnifying glass) about 5 px. I would like for the selectable area to be on the magnifying glass the entire time.
This is the HTML
<div class="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="Search by Address, Agent or Client..."/>
<span class="fa fa-search"></span>
</form>
This is the CSS
body {
background: #005DC1;
font-size: 15px;
}
.wrap {
position: relative;
right: 50px;
height: 22px;
float: right;
}
input[type="text"] {
height: 20px;
width: 0px;
font-size: 12px;
font-family: helvetica;
border: none;
outline: none;
color: rgba(255, 255, 255, 0.8);
padding: 3px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 1;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #fff;
}
input[type="text"]:focus {
width: 250px;
z-index: 1;
border-bottom: 1px solid #fff;
cursor: text;
}
.wrap span {
color: rgba(255, 255, 255, 0.8);
z-index: 5000;
cursor: pointer;
right: 3px;
height: 20px;
width: 25px;
}
Here is my current CodePen.
Here is the original Codepen I am attempting to mimic with my own design.

Answer 1

I think you just need to add padding-right to your input, see this CodePen