How to place an element at the left and right side of overflowing div

Question

I will be making the arrows clickable to scroll left/right in the div

I have a div which contains a bunch of elements (arrows are not included in the div for my method) as seen here

I want to align the arrows as seen in the image, however these are not responding as expected when the page is a different size due to the terrible method I have wrote.. what would be the best way to do the above?

At the moment my code looks like this:

<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
      <div className="gridRow">
         ......content for elements here.......
      </div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>

And the CSS:

/*Arrow images*/
.arrow {
  border: 1px solid red;
  position: absolute;
  top: 121%;
}

.arrow.right {
  left: 91.7%;
}

.arrow:hover {
  cursor: pointer;
}

Thanks

Answer 1

Instead of giving position: absolute to the two arrows (which will make them unresponsive to screen changes), you could just wrap everything inside a div and give the div the following CSS properties:

display: flex;
align-items: center.

This way, all the elements will be in a row and vertically centered.