Making vertical instead of horizontal

pages/index.js

@@ -49,7 +49,7 @@ const Home = () => {
               onChange={onChange}
             />
             <textarea
-              className="text-area"
+              className="text-area text-area-output"
               placeholder="your lyrics and song titles will go here"
               value={output}
               disabled

pages/styles.css

@@ -50,6 +50,7 @@ body {
 
 .text-container {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%
@@ -60,11 +61,11 @@ body {
             serif;
     color: #000;
     width: 100%;
-    height: 400px;
+    height: 75px;
     font-size: 14px;
     border-radius: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
     padding: 5px;
     background-color: #EDF2F7;
     border-color: rgba(118, 118, 118, 0.3);
@@ -73,6 +74,7 @@ body {
 
 .text-area-output {
     position: relative;
+    height: 250px;
 }
 
 .generate-button {
@@ -121,7 +123,7 @@ body {
 .lds-ring {
     display: inline-block;
     position: relative;
-    width: 20px;
+    width: px;
     height: 20px;
 }