Static label inside input
<p>There is a lot of similar question but I couldn't adjust it to my case.</p>

<p>Here are my goals:</p>

<ul>
<li>borderless input list</li>
<li>static(not disappearing) label on the left side of every input, vertically centered</li>
<li>value of the input on the right</li>
<li>applying some effect on focus(border, shadow, etc)</li>
<li>pure css(I can probably achieve all of these using javascript, but it feels dirty)</li>
</ul>

<p>I have achieved acceptable effect placing input next to the span, but I can't apply any focus effect on whole row in such way.</p>

<p>Here is an example without focus effect:</p>

<p><a href="https://i.stack.imgur.com/Le3Ep.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Le3Ep.png" alt="enter image description here"></a></p>

<p>@Edit:</p>

<p>Here is my code for presented output, but as mentioned, it cannot handle focus properly. <a href="http://jsfiddle.net/f2znvn4f/" rel="nofollow noreferrer">http://jsfiddle.net/f2znvn4f/</a></p>

<p>Here is my code for <code>relative/absolute</code> solution. The problem is that when focused, label is not affected by effect(and looks like crap). <a href="http://jsfiddle.net/kv2uyjbt/1/" rel="nofollow noreferrer">http://jsfiddle.net/kv2uyjbt/1/</a></p>