InputArea Component

input-area.css

div[data-autogrow]:has(textarea) {
  display: grid;
}

div[data-autogrow]:has(textarea)::after {
  content: attr(data-autogrow) ' ';
  white-space: pre-wrap;
  visibility: hidden;
}

div[data-autogrow]:has(textarea) > textarea {
  resize: none;
  overflow: hidden;
}

div[data-autogrow]:has(textarea) > textarea,
div[data-autogrow]:has(textarea)::after {
  grid-area: 1 / 1 / 2 / 2;
  border: 1px solid black;
  padding: 0.5rem;
  font: inherit;
}

input-area.tsx

import type { ComponentPropsWithoutRef } from "react";

export interface InputAreaProps extends ComponentPropsWithoutRef<"textarea"> {
  wrapperClass?: string;
}

export default function InputArea(
  { wrapperClass, ...props }: InputAreaProps
) {
  return (
    <div className={wrapperClass} data-autogrow={props.value}>
      <textarea {...props}></textarea>
    </div>
  );
}