imges and text going outside the div box on window sizing smaller [closed]

I have an issue where I simply want text and images to disappear at the edge of their containing div. Currently, when I shrink the window they scroll past the div.

Here are two images of what I'm dealing with. I'm not a CSS mavin, but I've tried things like overflow: hidden and things easily found on SO or web search. Things like word-wrap and break-word don't solve the issue of just wanting everything to disappear at the edge of the div.

I'm pretty sure there's a straightforward way to have the text and image disappear at the edge of the div like the edge of the window. Being able to resize the window is important to the site I'm developing I would like to learn the proper css so I can use this in several other places on the site.

I can't post images cause they are local on my machine. They simply show text clearly going past the div boundary and visible on the other side.

This is the current code, edited for brevity.

The question is: what CSS would you add to this to make it work how I'd like. Is it even possible? The only CSS I'm asking about is how to make any text disappear at the edge of the div anywhere I need to make that happen?

return ( <div className='dash-content-first'> <div className='sum-cards'> <div className='dash-summary-cards card-BGColor-2'> <div className='dash-cards'> <span className='dash-title no-hover card-BGColor-4'>Ducks</span> <span className='dash-data no-hover card-BGColor-4'>Quack! Quack!</span> </div> <div className='img-icon card-IconColor-2'> <GiTakeMyMoney className='img-position-icon'/> </div> </div> </div> . . More "sum-cards" here... . </div> }

text is a placeholder only.