<body>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    
  <div id="app"></div>
</body>
#container {
    display: grid;
    grid-template-rows: 100px 50px;
    grid-template-columns: 150px 1fr;
}

#itemA {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: #f88;
}

#itemB {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #8f8;
}

#itemC {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background: #88f;
}
function Item(props) {
  return <div id={props.id}>{props.name}</div>
}

function Container(props) {
  return (
    <div id="container">
      <Item id="itemA" name="A" />
      <Item id="itemB" name="B" />
      <Item id="itemC" name="C" />
    </div>
  )
}

function App() {
  return <Container />;
}

const target = document.querySelector('#app');
ReactDOM.render(<App />, target);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.