.autogrow {
    display: inline-grid;
    vertical-align: top;
    align-items: stretch;
    position: relative;
    width: 100%;
    margin: 0 calc( -1 * var(--flex-form-field-padding));
    padding: .25em var(--flex-form-field-padding);
    border: 0;
    grid-template-areas: 'text text text text text';
}

.autogrow::after,
.autogrow > textarea {
    grid-area: text;
    width: 100%;
    min-height: 1.5rem;
    font: inherit;
    padding: .25em 0;
    margin: 0;
    resize: none;
    background: none;
    appearance: none;
    border: none;
}

.autogrow::after {
    content: attr(data-value) ' ';
    visibility: hidden;
    white-space: pre-wrap;
}

.autogrow > textarea:focus {
    outline: none;
}