The bottom line for text-field is shown a bit above. No CSS used ...
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
<label class="mdl-textfield__label" for="phone">Phone</label>
<span class="mdl-textfield__error">Digits only</span>
</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="demo-input" />
<label class="mdl-textfield__label" for="demo-input">UserName...</label>
</div>
</form>