Estou tentando fazer com que o label simule um placeholder fixo. A maior dificuldade é alterar as propriedades do label quando o input recebe o focus, e o input preencher o resto do espaço automaticamente. Tentei usar a mesma técnica do float left com overflow hidden, mas não funcionou. 

Teria como fazer isso usando apenas CSS?

**HTML:**

<!-- language: lang-html -->

    <article>
    
    <form>
    
    	<label>Qualquer nome para qualquer tamanho</label>
    	<input>
    
    </form>
      
    </article>

**CSS:**

<!-- language: lang-css -->

    *{margin: 0; padding: 0;}
    
    article{
    	width: 50%; background: red;
    }
    label{
    	float: left; 
    	padding-right: 2%;
    	background: green;
    }
    form{width: 100%;}
    
    input{
    	overflow: hidden;
    	width: inherit;
    	border: 0; background: green; 
    	font-size: 1em;
    	outline: none;
    }
    
    input:focus ~ label {
      color: red;
    }

[**Código no CodePen**][1]


  [1]: http://codepen.io/ivandinizaj/pen/sfgDl