How to align label and input text inside MUI textarea?

I need a textarea field containing label inside the textarea field. The input text will start from the end of the label. If the label is so long, it will go to the second line. According to device width, the field and label will be responsive.

My expectation

Name of the Hospital/Clinic/Consultation Center, etc. : Dhaka Medical College and Hospital

What I've tried

const [value, setValue] = useState('');

<TextField
  label="Name of the Hospital/Clinic/Consultation Center, etc."
  multiline
  minRows={2}
  fullWidth
  className="myname"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

**Style:**

.myname {
  label {
    transform: translate(14px, 16px) scale(1) !important;
    color: #000 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  fieldset {
    legend {
      display: none !important;
      visibility: hidden !important;
    }
  }
}

I've tried using contentEditable. Here is the solution

const LongLabelTextarea = (props) => {
  const { label, onChange = () => {}, className } = props;

  const containerRef = useRef(),
    contentRef = useRef();

  useEffect(() => {
    const container = containerRef.current,
      content = contentRef.current;

    function placeCaretAtEndOfLabel() {
      const range = document.createRange();
      const sel = window.getSelection();
      range.selectNodeContents(content);
      range.collapse(false);
      sel.removeAllRanges();
      sel.addRange(range);
    }

    // Place caret at end on focus
    container.addEventListener("click", placeCaretAtEndOfLabel);
    content.addEventListener("focus", placeCaretAtEndOfLabel);

    // Extract user input
    content.addEventListener("input", (e) => {
      //console.log("User input:", content.innerText.trim());

      e.target.value = content.innerText;
      onChange(e);
    });
  }, []);

  return (
    <div className={`${Style.container} ${className}`} ref={containerRef}>
      <label className={Style.label}>{label} </label>
      <div className={Style.content} contentEditable={true} ref={contentRef}></div>
    </div>
  );
};

export default LongLabelTextarea;

Style:

.container {
  border: 1px solid #ccc !important;
  padding: 8px !important;
  word-break: break-word !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
}

.container:has(.content:focus) {
  outline: none !important;
  border-color: #007bff !important;
}

.label {
  display: inline !important;
  color: #888 !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

.content {
  display: inline !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  outline: none !important;
}

Details: https://codesandbox.io/p/devbox/longlabeltextarea-dgk7w3