* created a presentational component to house Game and UltimateGame

* tweaked css a little

src/components/App.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Game from './Game';
+import Title from './Title';
+import UltimateGame from './UltimateGame';
+
+export default function App() {
+  return (
+    <div>
+      <Title name="React" />
+      <div className="table">
+        <div className="table-cell">
+          <UltimateGame />
+        </div>
+        <div className="table-cell table-large-padding">
+          <Game />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Board.jsx

@@ -10,17 +10,17 @@ export default function Board({
 
   return (
     <div data-testid={testId} className={className}>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('0', 'topLeftSquare')}
         {renderSquare('1', 'topMiddleSquare')}
         {renderSquare('2', 'topRightSquare')}
       </div>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('3', 'centerLeftSquare')}
         {renderSquare('4', 'centerMiddleSquare')}
         {renderSquare('5', 'centerRightSquare')}
       </div>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('6', 'bottomLeftSquare')}
         {renderSquare('7', 'bottomMiddleSquare')}
         {renderSquare('8', 'bottomRightSquare')}

src/components/Game.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Title from './Title';
 import Board from './Board';
 import Status from './Status';
 import { calculateWinner } from '../helpers';
@@ -61,16 +60,13 @@ export default class Game extends React.Component {
     });
 
     return (
-      <div>
-        <Title name="React" />
-        <div className="game">
-          <div className="game-board">
-            <Board squares={squares} onClick={i => this.handleClick(i)} />
-          </div>
-          <div className="game-info">
-            <Status gameInfo={status} />
-            <ol>{moves}</ol>
-          </div>
+      <div className="game">
+        <div className="game-board">
+          <Board squares={squares} onClick={i => this.handleClick(i)} />
+        </div>
+        <div className="game-info">
+          <Status gameInfo={status} />
+          <ol>{moves}</ol>
         </div>
       </div>
     );

src/components/Title.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function Title({ name }) {
-  return <h1>Hello {name}</h1>;
+  return <h1>Tic-tac-toe in {name}!</h1>;
 }

src/components/UltimateGame.jsx

@@ -30,7 +30,7 @@ export default class UltimateGame extends React.Component {
 
   renderBoard(boardIndex, boards, testId) {
     const currentBoard = boards[boardIndex];
-    const boardClass = `board-cell ${getColorClass(currentBoard)}`;
+    const boardClass = `table-cell table-board-border ${getColorClass(currentBoard)}`;
 
     return (
       <Board

src/index.css

@@ -15,15 +15,30 @@ ol, ul {
   padding-left: 30px;
 }
 
-.board-row {
+.table {
+  display: table;
+}
+
+.table-row {
   display: table-row;
 }
 
-.board-cell {
-  border: 2px solid #fff;
+.table-column {
+  display: table-column;
+}
+
+.table-cell {
   display: table-cell;
 }
 
+.table-large-padding {
+  padding-left: 50px;
+}
+
+.table-board-border {
+  border: 2px solid #fff;
+}
+
 .status {
   margin-bottom: 10px;
 }

src/index.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Game from './components/Game';
-import UltimateGame from './components/UltimateGame';
+import App from './components/App';
 import './index.css';
 
-const ultimateGameApp = document.createElement('div');
-const normalGameApp = document.createElement('div');
-document.body.appendChild(ultimateGameApp);
-document.body.appendChild(normalGameApp);
-ReactDom.render(<UltimateGame />, ultimateGameApp);
-ReactDom.render(<Game />, normalGameApp);
+const app = document.createElement('div');
+document.body.appendChild(app);
+ReactDom.render(<App />, app);