.wrapper {
  display: inline-block;
}

.textField {
  width: 100%;
}

.textField + :global(.mdc-text-field-helper-line) {
  display: block;
}

:global(.mdc-text-field--focused + .mdc-text-field-helper-line) .helpText {
  // Here, our transitions are staggered such that the help text expands first
  // and then appears/fades in (although there is 50ms of overlap for speed).
  transition: max-height 200ms ease-out,
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}

.helpText {
  overflow: hidden;
  // Our transitions are staggered such that the help text disappears first and
  // then collapses (although there is 50ms of overlap for speed).
  transition: max-height 200ms ease-out 100ms,
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}