From a0b2f0fd5dd6f76efde3d0c5b6ee0f9ab0db7c48 Mon Sep 17 00:00:00 2001
From: emarchak <erin.marchak@shopify.com>
Date: Fri, 8 Feb 2019 16:32:00 -0500
Subject: [PATCH] Move character counter to bottom of multiline text input.

---
 UNRELEASED.md                           | 2 ++
 src/components/TextField/TextField.scss | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 64753e3a604..20aeaa04601 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -12,6 +12,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Move character counter to bottom of multiline text input ([#992](https://github.com/Shopify/polaris-react/pull/992))
+
 ### Documentation
 
 - Added all props example of `ResourceList` in the [style guide](https://polaris.shopify.com) ([#978](https://github.com/Shopify/polaris-react/pull/978))
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index 55b97ca8834..878f79c5718 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -18,6 +18,7 @@ $stacking-order: (
 
 .multiline {
   padding: 0;
+  flex-wrap: wrap;
 
   > .Input {
     overflow: auto;
@@ -174,12 +175,14 @@ $stacking-order: (
   @include text-emphasis-subdued;
   z-index: z-index(contents, $stacking-order);
   margin-right: $backdrop-horizontal-spacing;
-  line-height: control-height();
   pointer-events: none;
+  text-align: right;
 }
 
 .AlignFieldBottom {
   align-self: flex-end;
+  width: 100%;
+  padding-bottom: spacing(tight);
 }
 
 .Spinner {