line numbers for content editable div

Question

I am trying to show line numbers to a div that is contenteditable. So the content is not static and can be edited like a normal editor. So far I could add line numbers but when I add new lines or delete a line it is not behaving properly.

Here is the code.

#textarea {
    outline: 0px solid transparent;
    padding: 10px 16px;
    counter-reset: line;
}
#textarea .lines {
  display: block;
}
#textarea .lines:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  margin-right: .5em;
  color: #888
}

<div placeholder="Type here..." id="textarea" style="font-size:20px;resize: inline;width: 100%;margin-top: 0px; border: 1px solid #ddd;height: 89vh;overflow-y: auto;" spellcheck="false" contenteditable="">
<span class="lines">India win series 2-1 in the series decider</span>
<span class="lines">India chases a tricky 300+ score at Cuttack with the top 3 contributing once again with their half-centuries. Captain Virat Kohli was adjudged man of the match for his vital 85 runs which indeed guided the team when the openers departed after a century-plus stand.</span>
<span class="lines">Also, Rohit Sharma was awarded man of the series and he also end has the highest run-getter in ODIs this year. Earlier West Indies scored 100+runs in their last 10 overs to set a target of 316 for the hosts to chase. Pollard and Pooran had 100plus stand in quick time to take West Indies to a formidable total.</span>
<span class="lines"></span>
<span class="lines"></span>
</div>

**

So I want to solve this problem of merging two lines and inserting new line in contenteditable

Ratiocination

Thats the problem with contenteditable, deleting a row deletes the child div as well.. you could create a seperate div right next to the contenteditable and use javascript to display row numbers :) – Mufinella

@HagaiWild That seems to be a good solution, but how to sync these two divs. – Ratiocination

if you don't need user formatting, just put a textarea on top, in sync with your span, don't use contenteditable. – Odlo