如何使两个全尺寸文本区域并排？

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>
    );
  }
}