[Plugin: Contact Form 7] Focus field icons

Hi there,

I’m trying to change the color of the fontawesome icons I added to my form fields.
This used to be quite simple before I started using Contact Form 7.
To put it the simplest, my HTML was:

<div class="myClass">
     <input type="text" placeholder="Username">
     <span class="fa fa-user"></span>
</div>

and the CSS:

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
input:focus +.fa {
  color: red !important;
}

Now, with the generated shortcode + the icon bit of code:
[text* your-name placeholder "Name"]<span class="fa fa-user"></span>
the icon won’t change its color on focusing the field.

I realized that the “span” for the icon was on a higher level than the “input”, while in my former structure both (span and input) were at the same level.

In the working structure, we had the following:
1-<p>
2–<input>
2–<span> (with the icon)
2–</span>
1-</p>

In the non-working structure, we have this instead:
1-<p>
2–<span>
3—<input>
2–</span>
2–<span> (with the icon)
2–</span>
1-</p>

So I tried to figure out how to put the “span” with the icon in the same level as the “input” by using the shortcode. I Tried this:
[text* your-name class:"fa fa-user" placeholder "Name"]
to no avail. To my surprise, it keeps the same structure.

So my question is, what’s the estructure of the CSS selector I should use in order to properly target the span containing the icon?
Code here at JSFiddle

Any help will be much appreciated.
Cheers!