stop .resizable() inner divs from being deleted

stop .resizable() inner divs from being deleted

I wanted to implement:  https://jqueryui.com/resizable/ into my project but finding some issues with it for what I want to do.

https://jsfiddle.net/kzud925q/2/ - if you insert a table in there, (expand it a bit) the first issue I had was you can't select a cell to enter content. It selects one of the divs the function adds to the table cell so I had to make the content editable false for it to not select.  Not sure if this is the best method?

Next problem I had was when you go to type in some content into a cell it expands the calls into it's sibling.  i think this has something to do with the table have a width value in the style but I can't get around it with this.  Any time you change it it changes the width style value when it would be better to change the td width.

final and major issue I have is, if you click in any cell and start pressing the delete button and check the actual html you can see the div's for the resize handler being deleted!!!

The jquery for this is all way over my head, is there anyway to fix points 2 way 3?