move editor out of header

src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
     background-color: #282c34;
-    min-height: 100vh;
+    min-height: 25vh;
     display: flex;
     flex-direction: column;
     align-items: center;

src/App.tsx

@@ -13,13 +13,6 @@ function App() {
     return (
         <div className="App">
             <header className="App-header">
-                <AceEditor
-                    mode="python"
-                    theme="github"
-                    onChange={onChange}
-                    name="editor"
-                    editorProps={{ $blockScrolling: true }}
-                />
                 <p>
                     Edit <code>src/App.tsx</code> and save to reload.
                 </p>
@@ -32,6 +25,13 @@ function App() {
                     Learn React
                 </a>
             </header>
+            <AceEditor
+                mode="python"
+                theme="github"
+                onChange={onChange}
+                name="editor"
+                editorProps={{ $blockScrolling: true }}
+            />
         </div>
     );
 }