Code playground (like CodePen) inside WordPress?

I've reached exhaustion in trying to find a solution to my problem. And the problem is that I want to display custom HTML/CSS snippets inside of my WordPress blog posts (e.g. be able to render them and let readers interact with them) without using an embed like CodePen or JSFiddle.

Let's say I wanted to add an example of a grid container and then let users resize it directly inside the article itself.

Does anyone have any ideas or tips on how to achieve my desired result? I am honestly not opposed to paying for a premium plugin that does this if there is any. It's just that I want to avoid using embeds as much as possible.

Thanks!