💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line: - If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.

This looks great, the only thing I'd say is to make sure it looks the way we want when the output window is at its minimum width.

On MDN pages the editor is laid out "side by side": that is with the example choices on the left and the output on the right, as it is in the local server that's started by npm run start. Then if the page width goes below some threshold it switches to "top and bottom", with the example choices above and the output below.

I'm not sure what the exact threshold is, but it seems to give us a minimum output window width of about 285 pixels. At that width the flex items wrap into a single column, which cuts off the top and bottom of the container:

I wasn't sure if this was intentional, but if not perhaps it would be good to make the items narrower?

That's probably doable for this one but I can think of examples (especially in grid layout) that will be difficult to make so narrow and still useful.

Also, did I miss documentation about minimum widths? If that doesn't exist perhaps it should be added somewhere.

Also, did I miss documentation about minimum widths? If that doesn't exist perhaps it should be added somewhere.

Very good point @rachelandrew I was thinking the exact same thing as I was reading the comments. I believe this has not been at the top of our minds as we were focus on the JS examples. I will add an issue to mention this clearly in the docs.

That's probably doable for this one but I can think of examples (especially in grid layout) that will be difficult to make so narrow and still useful.

I think that's fine, we should be pragmatic about it :).

Also, did I miss documentation about minimum widths? If that doesn't exist perhaps it should be added somewhere.

No, I don't think it does, and yes, we should add it to the contributing guide.

ok - I've updated this for both of those issues.

Congrats on merging your first pull request! 🎉🎉🎉