I'm building a sliding banner (carousel) and running into an issue where when the text content gets too long, it starts overlapping other elements on the page — including the arrow navigation buttons.

What happens is When the text gets too long, it overflows past the arrow buttons instead of staying between them. I want the text to be constrained to the space between the left and right arrows — so if it's long, it wraps and stays sandwiched in that middle area, never overlapping the buttons

I'm using HTML/CSS/JS. Is there a clean way to fix this problem. Down below is the code.

https://jsfiddle.net/ojwyn82k/2/