styles.css

html,
body {
   margin: 0;
   padding: 0;
   background-color: rgba(30,31,30,20%);
}

.wrapper {
   display: flex;
   min-height: 95vh;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.editor {
   width: 100%;
   max-width: 1980px;
   margin: 20px auto 10px;
   height: 800px;
   display: flex;
   box-shadow: 0 7px 7px rgba(0, 0, 0, .1), 0 -2px 3px rgba(0, 0, 0, .125);
}

.editor__code {
   position: relative;
   border: none;
   flex-basis:60%;
}

.editor__preview {
   position: relative;
   flex-basis: 40%;
}

.editor__code > *,
.editor__preview > * {
   position: absolute;
   width: 100%;
   height: 100%;
}

.buttons {
   text-align: right;
}

.button {
   background: #f5df1b;
   color: #000000;
   width: 10em;
   padding: 0.6em 2.3em 0.7em;
   border-radius: 4px;
   font-weight: 400;
   border: none;
   cursor: pointer;
   font-family: sans-serif;
   font-size: 15px;
   box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
   transition: background-color .1s ease;
}

.button:hover {
   background: #ffed4e;
}

.button:active {
   background: #e6d329;
   padding: 0.7em 2.3em 0.6em;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

.button:disabled {
   pointer-events: none;
}