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;}

     body{
       font-family: arial;
     }

     article{
        margin: 5% 0 0 4%;
	width: 50%;
    }

    label{
      float: left;
      padding: 2%;
      background: #ccc;
      line-heigt: 0;
      font-size: 1em;
      border-radius-right: 3px;
    }
    
    form{width: 100%;}

    input{
        display: block;
        padding: 2%;
        overflow: hidden;
        border: 0;
        background: #ccc;
        font-family: arial;
        font-size: 1em;
        outline: none;
    }

    input:focus{
      background: #999;
    }

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


  [1]: http://codepen.io/anon/pen/pjdDv