CSS3 Transition different depending on search or text input?

CSS3 Transition different depending on search or text input?

First off, I went and looked at the responses generated for answers when
asking this question. Didn't find anything similar. I'm just dealing with
a weird quirk in my code pen. A result I was not expecting.
The easiest way to explain is to simply link to my code pen. Code Pen:
CSS3 Expandable Search Form
I have the same css code applied to two different types of inputs. One is
a search input and the other a text input. In order to get similar results
from each i have to modify the amount that the transition opens up to in
width on the text input and set it to 95% instead of 100%.
My goal was to have each using the same transition code with similar
transition effect. But it's not working. I would be very appreciative to
anyone who takes a look at it and may be able to help me. Thanks. BTW I am
a newbie to both stack overflow and code pen. I'm sorry if I do anything
wrong. lol I did try and look for an answer.
I tried posting code here, but I must be doing something wrong. Everything
is in code pen though.