Drag the box's bottom-right corner, or move the slider — either way a ResizeObserver
reports the box's own size live, and the layout inside reacts to its width, not your
browser window's.
The corner-drag is mouse/touch only — the slider is the accessible equivalent, and both do the exact same thing: change the element's own box. Watch the cards inside flip from stacked to side-by-side once the box gets wide enough — that's an element-driven breakpoint, the same trick behind CSS container queries, done in JavaScript.
// resize the box above — the entry appears here
contentRect, contentBoxSize, and borderBoxSize are the three
ways one ResizeObserverEntry reports the new size. Drag or slide the box and this
updates instantly; resize your actual browser window instead and it doesn't move — only the
"window resize events" counter above does. That's the whole point: the observer reacts to the
element, independent of the window.
Every batch the browser delivers, newest first.