HTML structure is destroyed when changes are made

[SKPFCW]

Hello everyone.

Let's assume you have a span structure like this in the editor document:

<p>lorem ipsum ... </p>

<span class="-label" contenteditable="false">
  <span>Label Line 1</span>
  <span>Label Line 2</span>
</span>

<p>lorem ipsum ... </p>

The inner span elements are used to assign css attributes to the structure, e.g:

span.-label {
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  border-radius: 4px;
  padding: 2px;  
}

span.-label > span{
  flex: 1 1 100%;
}

span.-label > span:nth-child(1) {
  font-weight: bold;
}

Expected result:

If changes are made in the editor (e.g. changing the font size in the previous paragraph), the span element loses its children:

<span class="-label" contenteditable="false">Label Line 1Label Line 2</span>

Result:

Setting the ‘htmlUntouched’ option to true does not solve the problem.
The specified span structure is provided by an external service and cannot be changed by me.

See Fiddle:
https://jsfiddle.net/w10kjq54/

I am thankful for any help.