Help with CSS layout for Random Quote Machine

Tell us what’s happening:
If I resize the browser, or if a long quote is rendered in the quote box, the Twitter icon and New Quote button gets displaced. “box-1” contains the quote and author name and “box-2” contains the icons and button. I want box-1 to resize responsively based on browser size or length of quote, without displacing the contents of box-2. Any advice will be appreciated.

Your code so far
https://codepen.io/r4hu1/pen/oNjGbqz

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge: