JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-wrapper" id="wrapper">
  <menu class="main-menu">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </menu>
  <section class="main-scene">
    <!-- <video autoPlay muted loop src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"></video> -->
    <h1> Header </h1>
    <div>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>subitem
          <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
          </ul>
        </li>
      </ul>
      <h2> subheader </h2>
      <article>
        <h3> Article tag here </h3>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur porro eius quis maxime qui, officia doloribus in rerum odit harum consequuntur, doloremque repellendus necessitatibus earum autem quam. Laboriosam, nobis voluptas. </p>
        <button id="flip"> flip content! </button>
      </article>
    </div>
  </section>
</div>

SCSS

body, html {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
  font-family: sans-serif !important;
  backface-visibility: visible !important;
}

div.main-wrapper {
  padding-left: 120px;
  width: 0px;
  height: 0px;
  
  &.arabic {
    transform: scaleX(-1);
    direction: rtl;
    
    > * {
      transform: scaleX(-1)
    }
  }
}

section.main-scene {
  height: 100vh;
  background: rgba(white, .70);
  padding: 40px;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 120px;
  right: 0;
  bottom: 0;
  
  video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
  }
  
  h1, h2 {
    margin-top: 0;
    text-align: center;
  }
  
  > div > ul {
    transform: translateX(50%);
  }
}

menu.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  width: 120px;
  background: yellow;
  margin: 0;
}

JavaScript

var flipper = document.getElementById("flip")
var wrapper = document.getElementById("wrapper")

flipper.addEventListener("click", () => {
	wrapper.classList.toggle("arabic")
})