Как сделать две полноразмерные текстовые области рядом?

Question

Я хочу создать две полноразмерные текстовые области рядом друг с другом. Я ожидаю, что дисплей будет выглядеть как изображение внизу.

ожидаемое отображение:

Вот мой код в JSX и Reactjs.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      markdown: ''
    };
  }

  onInputChange(markdown) {
    this.setState({markdown});
  }

  render() {
    return (
      <div>
      <header className="text-center">Marked Previewer</header>
      <div className="container">
        <div className="row">
          <div id="markdown" className="col-md-6">
            <div className="label">Editor</div>
            <textarea
              id="editor"
              value={this.state.markdown}
              onChange={event => this.onInputChange(event.target.value)}>
            </textarea>
          </div>
          <div id="output" className="col-md-6">
            <div id="label">Preview</div>
            <textarea id="preview"></textarea>
          </div>
        </div>
      </div>
      </div>
    );
  }
}