Flexercise #3

Here is a layout from my upcoming series on using the OpenAI API to generate a color and font based on a quote:

When the screen gets narrower, the buttons get closer together (and the textarea gets narrower too, but that’s not part of this flexercise. 😄)

When the screen gets narrow enough that the buttons don’t fit, they end up stacking on top of each other:

Your challenge

  1. Recreate the layout shown above from the starting code in the editable sandbox below.
  2. All of the elements should have a vertical gap of 0.5rem separating them.
  3. Do not use any media queries .
  4. You may add new HTML elements and CSS classes as needed.

You can work within the editable sandbox below (if it doesn’t look like an editable sandbox, the page may need to be refreshed). Try making changes and the preview will update! You can drag the center divider to make the preview pane larger or smaller.

Here are a couple resources that may help: