Quiero cambiar el tamaño de un tramo arrastrando su borde siguiendo los caracteres de texto.

Aquí una imagen para que se entienda mejor:

Dejo un stackblitz usando React: https://stackblitz.com/edit/react-qvvqfe?file=src/App.js

Como dije, estoy usando React, pero una solución que usa solo Javascript está bien.

Esto es lo que probé:

ya que conozco el desplazamiento de la mención en el texto así:

 { startPos: 5, endPos: 10 }

Acabo de cambiar las posiciones de mención para ampliar el espacio y volví a representar el contenido del documento. Estoy haciendo esto usando un evento onClick porque estoy un poco perdido al incluir la parte de arrastre.