Game component

src/App.css

@@ -31,4 +31,13 @@ body {
 
 .status {
   margin-bottom: 10px;
+}
+
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
 }

src/App.js

@@ -13,7 +13,7 @@ function Square({value, onSquareClick}) {
   );
 }
 
-function App() {
+function Board() {
   const [xIsNext, setXIsNext] = useState(true);
   const [squares, setSquares] = useState(Array(9).fill(null));
   
@@ -61,6 +61,19 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board />
+      </div>
+      <div className="game-info">
+        <ol>{/*TODO*/}</ol>
+      </div>
+    </div>
+  );
+}
+
 export default App;
 
 function calculateWinner(squares) {