Bug de css avec mon formulaire.

Bonjour

J'ai suivie le didaticiel : Input Material Design
Quand les gens sélectionne un champ mes animation fonctionne très bien.

Si l'utilisateur se trompe je luis renvois les message d'erreur.
Ma présentation est brisé. Le label se remet en-dessous du texte que l'utilsateur à rentré ce n'est plus lisible.

Le deuxième problème est que les message d'erreurs son en-dessous des champs. Si un champs contient de l'information irronée je veux que le message soit visible.

Voici la preuve :
http://prntscr.com/5vvut7

voici le code source quand il y a une erreur :

<div class="material-input required error">
    <label for="UserPassword2" class="field-label">Conformation du mot de passe</label>
    <input name="data[User][password2]" class="field-input form-error error teste" type="password" value="sdsddfds" id="UserPassword2" required="required">
    <div class="error-message alert alert-error teste">Les mot de passse sont différent.</div>
 </div>

voici le css de mon message d'erreur :

.error-message {
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #e74c3c;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

le code css de mon formlaire (sass et compass)

.material-input {
    position: relative;
    height: 72px;
    padding: 16px 0 8px 0px;
}

.field-label {
    position: relative;
    display: block;
    margin: 0;

    line-height: 16px;
    font-size: 12px;

    color: lighten(#000, 75);
    font-weight: 400;
    font-size: 16px;
    @include transform(translateY(24px));
    @include transition(transform 0.3s);
    @include transform-origin(0, 50%);
}
.field-input {
    position: relative;
    display: block;
    width: 100%;
    height: 32px;
    padding: 8px 0;
    margin-bottom: 10px;

    background: transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 16px;
    border: none;
    outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.material-input::after, .material-input::before {
    position: absolute;
    bottom: 6px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;

    background-color: #e7e7e7;
}

.error .field-label {
    color: #e74c3c;
}
.material-input .error-message {
    position: static;
    clear: both;
}

Merci de votre aide.