JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id=child1 srcdoc="<h1>A</h1>"></iframe>
<iframe id=child2 srcdoc="<h1>B</h1>"></iframe>

JavaScript

const scheduleResize = (frame, cb) => {
	const context = frame.contentWindow;
  const observer = new context.ResizeObserver((...entries) => {
    observer.disconnect();
    cb();
  });
  observer.observe(context.document.body);
};
onload = e => {
	document.body.moveBefore?.(child2, child1);
	child2.contentWindow.requestAnimationFrame(() => {
  	console.log("child2 rAF");
  });
  child1.contentWindow.requestAnimationFrame(() => {
  	console.log("child1 rAF");
  });	
  scheduleResize(child2, () => {
  	console.log("child2 resize");
  });
  scheduleResize(child1, () => {
  	console.log("child1 resize");
  });


}