[TextField] Long labels break layout

The textfield layout is not responsive when there are long labels.

• This is a v1.3.1 issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

According to Material Design, long labels should be correctly positioned within the available input space:

Current Behavior

• Two or more line labels are overlapping the underline line.

Steps to Reproduce

https://codesandbox.io/s/6xjr79vx3w

import React from 'react';
import TextField from '@material-ui/core/TextField';

class TextFields extends React.Component {
  render() {
    return (
      <form noValidate autoComplete="off">
        <TextField
          id="name"
          label="This is a long label because things"
        />
      </form>
    );
  }
}

export default TextFields;

Context

• All content is usually content managed, which means that the content editors could enter in label that may break the layout.
• If the enter in a label that is longer than the available space, example: "Do you have any association with a government entity?", and the user is loading the page in an iPhone 5, there is no enough space to render the label in only one line.

Your Environment

Start with the linked CodeSandbox reproduction and the Material UI TextField component used there. Confirm the overlapping two-line label behavior at narrow widths, then compare the result with the expected Material Design positioning shown in the issue. Done means long labels remain correctly positioned without overlapping the underline.