fix(input): make start and end hints interact well when their text needs to wrap (#3979)

src/demo-app/input/input-demo.html

@@ -221,6 +221,15 @@
         <md-hint align="end">{{hintLabelWithCharCount.value.length}}</md-hint>
       </md-input-container>
     </p>
+    <p>
+      <md-input-container style="margin-bottom: 4em">
+        <textarea mdInput #longHint placeholder="Enter text to count"></textarea>
+        <md-hint>
+          Enter some text to count how many characters are in it. The character count is shown on the right.
+        </md-hint>
+        <md-hint align="end" style="white-space: nowrap">Length: {{longHint.value.length}}</md-hint>
+      </md-input-container>
+    </p>
     <p>
       <md-checkbox [(ngModel)]="color">Check to change the color:</md-checkbox>
       <md-input-container [color]="color ? 'primary' : 'accent'">

src/lib/input/input-container.html

@@ -44,7 +44,9 @@
     <div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
       [@transitionMessages]="_subscriptAnimationState">
       <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
-      <ng-content select="md-hint, mat-hint"></ng-content>
+      <ng-content select="md-hint:not([align='end']), mat-hint:not([align='end'])"></ng-content>
+      <div class="mat-input-hint-spacer"></div>
+      <ng-content select="md-hint[align='end'], mat-hint[align='end']"></ng-content>
     </div>
   </div>
 </div>

src/lib/input/input-container.scss

@@ -5,6 +5,7 @@
 
 $mat-input-floating-placeholder-scale-factor: 0.75 !default;
 $mat-input-wrapper-spacing: 1em !default;
+$mat-input-hint-min-space: 10px !default;
 
 // Gradient for showing the dashed line when the input is disabled.
 $mat-input-underline-disabled-background-image:
@@ -236,37 +237,11 @@ $mat-input-underline-disabled-background-image:
 
 // Clears the floats on the hints. This is necessary for the hint animation to work.
 .mat-input-hint-wrapper {
-  &::before,
-  &::after {
-    content: ' ';
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
+  display: flex;
 }
 
-// The hint is shown below the underline. There can be
-// more than one; one at the start and one at the end.
-.mat-hint {
-  display: block;
-  float: left;
-
-  // We use floats here, as opposed to flexbox, in order to make it
-  // easier to reverse their location in rtl and to ensure that they're
-  // aligned properly in some cases (e.g. when there is only an `end` hint).
-  &.mat-right {
-    float: right;
-  }
-
-  [dir='rtl'] & {
-    float: right;
-
-    &.mat-right {
-      float: left;
-    }
-  }
+.mat-input-hint-spacer {
+  flex: 1 0 $mat-input-hint-min-space;
 }
 
 // Single error message displayed beneath the input.