Validation messes up input group CSS

Question

I'm using PureCSS and the jQuery Validate plugin.

I have code like:

<form id='new-doctor' class='pure-form'>
   <fieldset class="pure-group">
    <input type="text" class="pure-input-1-2" placeholder="Doctor Name" required minlength="2">
    <textarea class="pure-input-1-2" placeholder="Credentials"></textarea>
   </fieldset>
</form>

http://jsfiddle.net/jGdK9/

If there's no validation, then the input group looks great (the two inputs are connected in the middle), but as soon as the validation happens (to try it out, type less than two characters in the name input and click outside of the input) the group gets seperated and doesn't look good anymore.

Answer 1

The problem is because of a rule (in pure-min.css) with the selector form .pure-group input:first-child, which sets the top of this input to -1px. Once you're appending your validation label before this input, this selector doesn't matches your input anymore, so the assumpted value for the top property is 1px, defined by another rule (.pure-form .pure-group input).

You could fix this problem with some monkey-patching:

.pure-form .pure-group .error + input{
  top: 1px;
}