Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Editeur html</title>
    <style type="text/css">
        .container {
            display: flex;
            flex-direction: row;
        }

        .editor {
            display: flex;
            flex: 1;
            border: 1px solid blue;
        }

        .editor textarea {
            width: 100%;
            resize: vertical;
        }

        .rendu {
            display: flex;
            flex: 1;
            border: 1px solid red;
        }

        .buttons {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="editor">
            <textarea id="code"><h1>Html code here</h1></textarea>
        </div>
        <div class="rendu">

        </div>
    </div>

    <div class="buttons">
        <button id="preview">Preview</button>
    </div>

<script type="text/javascript">
    var previewButton = document.getElementById('preview');
    var codeTextarea = document.getElementById('code');
    var rendu = document.querySelector('.rendu');

    preview.addEventListener('click', function (e) {
        rendu.innerHTML = codeTextarea.value
    })

</script>

</body>
</html>