Ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se

Bonjour j'ai un élément qui possède comme propriété <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

Cette class permet de reduire et agrandir un div par le petit icon sur le shéma indiqué par le flèche en rouge ci-dessus:


Comme vous le voyez le champ de texte est editable par la propriété contentEditable="true". Mais le problème c'est quand le texte commence à dépasser du div alors le petit icon commence à changer de position est je veux quelle reste toujours sur ca position initial même si le texte déborde du div.


Voici quelque partie de mon code:

<div id="1" class="draggable ui-draggable ui-draggable-handle ui-resizable ui-draggable-dragging" data-text="Votre texte ici" contenteditable="true">
Bonjour et bienvenue
</div>

et voici quelque lien qui permet de voir quelque résultat:

https://www.tutorialspoint.com/jqueryui/jqueryui_resizable.htm

Pouvez vous m'aider s'il vous plait, j'ai tous essayé, le bottom, le padding, le fixe,... mais quand on saisie plusieurs texte alors l'icon se déplace toujours et l'option resizable déplace en même temps avec.Merci de votre aide! ;-)