JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-div">
  <div class="inner">
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
     <button>
      Hello
    </button>
  </div>
  <div class="inner">
    <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
     <button>
      World
    </button>
  </div>
</div>

CSS

.outer-div {
  display:block;
  overflow:auto;
  border-style: dashed;
    border-width: 2px;
    border-color: blue;
  margin: 100px;
}

.inner {
  display: flex;
  justify-content: center;
}