JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
  <main>
    <section>
      #main fkjsdjk fjkdfsjkd f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>d f<br/>
    </section>
  </main>

  <side>
    <section>
      #side
    </section>
  </side>
</div>

SCSS

#body {
  display: flex;
  height: 100vh;
}

main {
  width: 65vw;
  height: 100vh;
  
  section {
    height: 100vh;
    float: right;
    border: solid 1px red;
    width: 300px;
  }
}

side {
  width: 35vw;
  height: 100vh;
  background: #ccc;
  
  section {
    height: 100vh;
    border: solid 1px green;
    width: 100px;
  }
}