StackBlitz

JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result: HTML - structure code, no need to add body doctype head, that's added automatically, CSS - styles. You can switch pre-pocessor to SCSS, JavaScript - behavior. There are many frameworks and code pre-processors you can use. Once you enter code, just hit "Run" in the top actions bar, and the fourth panel with results will appear. SFiddle allows you to switch the layout of the editor from the classic 2x2 grid to something that suits your needs. In addition to the grids mode it also has a tabbed mode. Grids are fully resizable. As an addition resizing the Results panel will tell you its width (handy for working on media queries).

Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly. Losing work sucks. We know that and we've felt it. That's why we made it almost impossible to lose yours. We keep track of your most recent work and keep a copy of all of your unsaved code. Every time you start an experiment, open a Plunk, a Gist or a Githubrepo, we save that for you and let you catch up where you left off. Plunker isn't a one-way street. Drag files from your desktop into the Plunker Editor's file tree and let your imagination go wild. This goes both ways. When you're ready to graduate, drag your project right to your desktop in one pretty little zip file ready for upload! All the power of the editor, in a clean little box with a bunch of knobs and levers to best suit your needs.