diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.js b/docs/src/pages/components/text-fields/HelperTextAligned.js
new file mode 100644
index 00000000000000..39c9e767950835
--- /dev/null
+++ b/docs/src/pages/components/text-fields/HelperTextAligned.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextAligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField helperText=" " label="Name" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.tsx b/docs/src/pages/components/text-fields/HelperTextAligned.tsx
new file mode 100644
index 00000000000000..39c9e767950835
--- /dev/null
+++ b/docs/src/pages/components/text-fields/HelperTextAligned.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextAligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField helperText=" " label="Name" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.js b/docs/src/pages/components/text-fields/HelperTextMisaligned.js
new file mode 100644
index 00000000000000..ea697edd31cd36
--- /dev/null
+++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextMisaligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField label="Name" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx
new file mode 100644
index 00000000000000..ea697edd31cd36
--- /dev/null
+++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export default function HelperTextMisaligned() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <TextField helperText="Please enter your name" label="Name" />
+      <TextField label="Name" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
index 7441472a1b7869..31b096d5b82b57 100644
--- a/docs/src/pages/components/text-fields/text-fields.md
+++ b/docs/src/pages/components/text-fields/text-fields.md
@@ -168,6 +168,16 @@ For number validation, one viable alternative is to use the default input type="
 
 In the future, we might provide a [number input component](https://github.com/mui-org/material-ui/issues/19154).
 
+### Helper text
+
+The helper text prop affects the height of the text field. If two text fields are placed side by side, one with a helper text and one without, they will have different heights. For example:
+
+{{"demo": "pages/components/text-fields/HelperTextMisaligned.js"}}
+
+This can be fixed by passing a space character to the `helperText` prop:
+
+{{"demo": "pages/components/text-fields/HelperTextAligned.js"}}
+
 ## Integration with 3rd party input libraries
 
 You can use third-party libraries to format an input.