JSFiddle - React, Tailwind, and code Playground

HTML

<div><mark>{DATE}</mark><i>via email: </i><mark><i>{EMAIL- BROKER OR TENANT}</i></mark></div>

CSS

textarea {
  width: 90%;
  height: 150px;
}

.split-but {
  position: absolute;
  right: 0;
  bottom: -23px;
  padding: 3px 10px;
  background: #ed7700;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 0 0 3px 3px;
}

div,
textarea {
  position: relative;
  border: 1px solid #fff;
  margin: 10px;
  padding: 10px;
}
.editing{
  border: 1px solid #00F;
}

JavaScript

$('div').on('click', function(e) {
  //$('textarea').getCursorPosition();
  $(document).find('.split-but').remove();
  var $splitbut = $('<p class="split-but">Split</p>').on('click', splitdiv);
  var el = $(this).get(0);
  var pos = 0;
  //console.log(el);
  
  $(this).attr('contenteditable', 'true').addClass('editing').append($splitbut);
  
  var userSelection;
	if (window.getSelection) {
		userSelection = window.getSelection();
	}
	var start = userSelection.anchorOffset;
	var end = userSelection.focusOffset;
  
  console.log(start);

  var before = $(this).html().substr(0, start);
  var after = $(this).html().substr(start, $(this).html().length);

  console.log(after);

});

var splitdiv = function(e) {
  e.stopPropagation();
  $('.split-but').remove();
  $('div').removeClass('editing').attr('contenteditable', 'false');
  console.log('a');
};