JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
  <div id="root-inner-container">
    <div class="app-container">
      <div class="div-1">
        <ul>
          <li>div 1 - One</li>
          <li>div 1 - Two</li>
          <li>div 1 - Three</li>
          <li>div 1 -Four</li>
        </ul>
      </div>
      
      <div class="div-2">
        <ul>
          <li>div 2 - One</li>
          <li>div 2 - Two</li>
          <li>div 2 - Three</li>
          <li>div 2 -Four</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

li {
  height: 150px;
}

#root {
  position: relative;
  height: 100vh;
  border: 2px solid black;
  overflow: hidden;
}

#root-inner-container {
   width: 100%;
}