<article>
  <h1>Fusce izzle dolor</h1>
  <p>Lorizzle ipsizzle dolor sit amizzle, fizzle adipiscing elit. Nullam sapizzle velizzle, shizzlin dizzle volutpat, suscipizzle quis, nizzle i'm in the shizzle. Nunc mah nizzle. Curabitizzle sit amet shizzle my nizzle crocodizzle nizzle ante shut the shizzle up dignissim. <span class="image">
    <span class="image-wrapper">
      <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="resting cat with eyes closed on wooden floor">
      <button><svg width="18" height="100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="Pattern" x="0" y="0" width=".295" height=".09">
          <circle cx="3" cy="3" r="1.8" fill="white"></circle>
        </pattern>
      </defs>
      <rect fill="url(#Pattern)" width="20" height="100"></rect>
    </svg>
    </button>
    </span>
    </span> Pellentesque crackalackin sizzle. Sizzle erizzle. Dawg izzle fo shizzle dapibizzle turpis my shizz check out this. Maurizzle pellentesque da bomb own yo' turpizzle. Bow wow wow izzle fizzle. Pellentesque fo shizzle mah nizzle fo rizzle, mah home g-dizzle rhoncizzle ma nizzle. In hac habitasse platea doggy. Own yo' dapibizzle. Funky fresh gizzle break yo neck, yall, pretizzle nizzle, mattizzle ac, eleifend vitae, nunc. Dope suscipizzle. Mah nizzle sempizzle velizzle sizzle purus.</p>
</article>

* {
  margin: 0;
}

img {
  max-width: 100%;
  object-fit: cover;
  max-height: 400px;
}

.resizer-down button {
  cursor: grabbing;
}

article > * + * {
  margin-top: 2em;
}

article > * {
  max-width: 60ch;
  font-size: 1.2rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

h1 {
  text-align: center;
  font-size: 3rem;
}

.break-out {
  display: flex;
  flex-direction: column;
  align-items: center;
margin-top: 15px;
  margin-bottom: 15px;
  transition: margin 0.3s ease-in-out;
}

.break-out img {
  max-width: 100vw;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px;
  cursor: col-resize;
  background: none;
  border: none;
}

const resizer = document.querySelector("button");
const article = document.querySelector("article");
const imageParent = document.querySelector(".image");
const image = document.querySelector("img");

let paragraphEle;
let leftImageMargin = 0;
let mouseOnImageOffset = 0;
let editorWidth = article.clientWidth;
let paragraphRightX;

resizer.addEventListener("pointerdown", handleMouseDownOnResizer);

function handleMouseDownOnResizer({ x: mouseDownX }) {
  const { left, right } = image.getBoundingClientRect();
  paragraphEle = document.querySelector("article > p");
  paragraphRightX =
    paragraphEle.clientWidth + paragraphEle.offsetLeft - mouseOnImageOffset;
  leftImageMargin = left;
  mouseOnImageOffset = right - mouseDownX;

  document.body.classList.add("resizer-down");
  document.body.style.cursor = "grabbing";
  document.addEventListener("pointerup", handleMouseUpOnResizer);
  document.addEventListener("pointermove", resizeImage);
}

function resizeImage({ x }) {
  let imgWidth = 0;

  if (x > paragraphRightX) {
    imgWidth = editorWidth - (editorWidth - x) * 2 + mouseOnImageOffset * 2;
    imageParent.classList.add("break-out");
  } else {
    imgWidth = x - leftImageMargin;
    imageParent.classList.remove("break-out");
  }

  image.style.width = imgWidth + "px";
}

function handleMouseUpOnResizer() {
  document.body.classList.remove("resizer-down");
  document.body.style.cursor = "";
  document.removeEventListener("pointermove", resizeImage);
  document.removeEventListener("pointerup", handleMouseUpOnResizer);
}