JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div class="wrapper">
  <div class="preview">
    Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Вершину рукопись эта осталось пунктуация оксмокс, путь имеет, снова свое!
  </div>
  <textarea class="editor"></textarea>
</div>

CSS

.wrapper {
  display: grid;
  min-width: 320px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  grid-template-columns: repeat(12, 1fr);
}

.preview,
.editor {
  grid-column: span 6;
  overflow: auto;
  resize: none;
}

JavaScript

'use strict';

document.getElementsByClassName('editor')[0].value = document.getElementsByClassName('preview')[0].innerHTML;
document.getElementsByClassName('editor')[0].addEventListener('keyup', function(e) {
	document.getElementsByClassName('preview')[0].innerHTML = e.target.value;
});