Добавление нового контейнера в тексте с разделением и смещением текста в React

Можно ли как-то разделить сам текст на две части, как показано на прототипе ниже?

В принципе получить количество строк можно нехитрым способом, но что с этим делать дальше?

  const textRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    const text = textRef.current;
    if (!text) return;
    let height = text.offsetHeight;
    let lineHeight = Number(
      window
        .getComputedStyle(text)
        .getPropertyValue("line-height")
        .replace("px", "")
    );
    let lines = Math.floor(height / lineHeight);
  }, [textRef]);