JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="inner">
  <p>
  Some other content here dsdfdsf dsfdsfsdf dsfdsf
  </p>
  <div class="scrolling-div">
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        last yellow
      </p>
    </div>
    
    </div>
    
  </div>
  
  </div>

CSS

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
  background-color: red;
}

.inner {
  background-color: yellow;
}

.scrolling-div {
  width: 100%;
  overflow-y:     hidden;
  overflow-x:     scroll;
  white-space:    nowrap;
  -webkit-overflow-scrolling: touch;
}

.bucket {
  display: inline-block;
  width: 66px;
  border: 1px solid;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}