I have a react app & I'm dividing my screen into two as shown below.

 <div className="App">
      <div className="left">
        {items.map((item) => (
          <h4>{item}</h4>
        ))}
      </div>
      <div className="right">
        {products.map((product) => (
          <span>{product}</span>
        ))}
      </div>
    </div>

In the left side Im displaying a list of h4 tags while mapping through a list and displaying it as row. On the right side I'm displaying a list of products as column.

The styling is below

.App {
  height: 100%;
  width: 100%;
  background-color: aquamarine;
  display: flex;
}

.left {
  width: 50%;
  background-color: red;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
.left h4 {
  padding-right: 1rem;
}

.right {
  width: 50%;
  display: flex;
  flex-direction: column;
}

Currently, the item list is overflowing and what I want is to display the overflowing items as a dropdownlist when we hover over to the end of the left div

Is there a way to do that?

The codesandbox is below

https://codesandbox.io/s/fervent-raman-0rywqt?file=/src/styles.css:0-304