<div id="app">
  </app>

body {
  background: #333;
  color: white;
}
.split-pane{
  display:flex;
}
.split-pane-left{
  flex: 0 1 30%;
  padding: 1rem;
  border: 1px solid gray;
}
.split-pane-right{
  flex: 1 1 60%;
  display: flex;
  padding: 1rem;
  justify-content:center;
  border: 1px solid gray;
}
/*
Example for passing child as props
*/
class SplitPane extends React.Component {
  render() {
    return (
      <div className="split-pane">
        <div className="split-pane-left">{this.props.left}</div>
        <div className="split-pane-right">{this.props.right}</div>
      </div>
    );
  }
}
class Application extends React.Component {
  render() {
    return (
      <div>
        <SplitPane
          left={<p>I will be rendered into the left part</p>}
          right={<p>I will be rendered into the right part</p>}
        />
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js