JSFiddle - React, Tailwind, and code Playground

by Vanilla__

HTML

<body>
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <div class="related">Related</div>
  <footer>Footer</footer>
</body>

CSS

body {
    display: flex;
    height: 40em;
    flex-wrap: wrap;
   	font-family: Helvetica, Arial, sans-serif;
	color: white;
    text-align: center;
}

header {
    background-color: purple;
    width: 30%

}
main {
    background-color: pink;
    width: 40%
}

aside {
    background-color: deepPink;
    width: 15%
}

.related {
    background-color: red;
    width: 15%
}

footer {
    background-color: slateBlue;
    width: 100%;
    height: 5em;
}

#wrapper {
    border: 4px solid white;
}

JavaScript

if(window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {

  window.addEventListener("resize", function addWrapper(q) {
   
  //Create div with id wrapper
  var div = document.createElement('div');
  div.id = "wrapper";

  // Select aside
  var selectDiv = document.querySelector("aside");

  //clone
  div.appendChild(selectDiv.cloneNode(true));
  //Place the new wrapper at the right place in the HTML
   selectDiv.parentNode.replaceChild(div, selectDiv);

  //Add related to the wrapper so they're both in the wrapper
  document.querySelector('#wrapper').appendChild(
    document.querySelector('.related') );
  });

    
} else {
   window.removeEventListener("resize", addWrapper(q));
    //I'm trying to delete the wrapper here
  }