Jak poprawnie wypozycjonować resizery na obrazku

Hej, chce odtworzyc wyglad obrazka z tej strony https://sereneinserenade.github.io/tiptap-media-resize/
Jak zobaczycie ten obrazek w devtoolsach to zobaczycie ze img i dwa resizery sa zawarte w divie a ten z kolei w spanie. Jak zmienia sie rozmiar obrazka to analogicznie zmieniaja sie rozmiary resizerow. Dodatkowo zmieniajac justify-content na article (najbardziej zewnetrzny kontener), to pozycja obrazka zmienia sie.
Chcialem to odtworzyc ale resizery zajmuja cala strone zamiast miec wymiary jak obrazek- moj kod: https://codepen.io/Piszczu-the-flexboxer/pen/OJarBLN

Moglby ktos zerknac co powinienem poprawic? Zalezy mi na tym zeby implementacja byla wlasnie taka jak na stronie ktora podalem.

Struktura HTML w tym przykładzie jest błędna.

<article class="container">
  <span class="span">
    <div class="img-container">
      <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png" width="25%">

      <div class="horizontal-resize-handle"></div>
      <div class="vertical-resize-handle"></div>
    </div>
  </span>
</article>

1. Jeśli używamy znacznika article to powinien on posiadać także nagłówek h1 - h6
2. Element liniowy nie powinien mieć wewnątrz elementu blokowego, czyli zagnieżdżenie diva w spanie jest nieprawidłowe
3. Atrybuty width, oraz height przyjmują wartość w pikselach, więc jeśli chcemy nadać im wartość procentową to powinniśmy skorzystać z CSS

<div class="container">
  <div class="span">
    <div class="img-container">
      <img src="https://www.copahost.com/blog/wp-content/uploads/2019/07/imgsize2.png" width="200" height="122" alt="">

      <div class="horizontal-resize-handle"></div>
      <div class="vertical-resize-handle"></div>
    </div>
  </div>
</div>

Co do samego centrowania to problem jest z tym, że width: fit-content ignoruje rozmiar zagnieżdżonego elementu jeśli te ma rozmiar w procentach, zdjęcie powinno mieć tutaj rozmiar w pikselach.