index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>weeact example</title>
    <script type="module" src="main.js" defer></script>
    <style>
        body {
            margin: 0;
        }

        .container {
            height: 100vh;
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 10% 50% 40%;
            grid-template-areas:
                    "prerender-header vdom-header"
                    "prerender        vdom"
                    "root             root";
        }

        @media screen and (min-width: 960px) {
            .container {
                grid-template-columns: 30% 30% 40%;
                grid-template-rows: 10% 90%;
                grid-template-areas:
                        "prerender-header vdom-header root"
                        "prerender        vdom        root";
            }
        }


        .prerender-header {
            grid-area: prerender-header;
        }

        .prerender-tree {
            grid-area: prerender;
            overflow: scroll;
        }

        .vdom-header{
            grid-area: vdom-header;
        }

        .vdom{
            grid-area: vdom;
            overflow: scroll;
        }

        #root {
            grid-area: root
        }
    </style>
</head>
<body>
<div class="container">

        <h4 class="prerender-header">PreRender Tree</h4>
        <pre class="prerender-tree"></pre>

        <h4 class="vdom-header">Virtual Dom</h4>
        <pre class="vdom"></pre>

    <div id="root"></div>
</div>
</body>
</html>