.resizable-textarea {
      position: relative;
      display: inline-block; /* or block, as you wish */
      width: 100%;
    }

    .resizable-textarea textarea {
      width: 100%;
      box-sizing: border-box;
      resize: none;        /* disable native resize handle */
      overflow: auto;
      min-height: 2em;    /* tweak as you like */
      max-height: 80vh;    /* prevent crazy tall */
    }

    .resizable-textarea .resizer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 12px;         /* the “handle” area */
      cursor: ns-resize;    /* vertical resize cursor */
      background: transparent;
    }

    /* optional: give user feedback on hover */
    .resizable-textarea .resizer:hover {
      background: rgba(0,0,0,0.05);
    }