Update style.css

Tinyllama/style.css

@@ -20,7 +20,7 @@
     padding: 2rem;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-width: 500px;
+    max-width: 1000px;  /* Set a larger width for desktop layout */
     width: 100%;
   }
 
@@ -31,6 +31,20 @@
     color: #333;
   }
 
+  /* Layout */
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  /* Form Section */
+  .form-section {
+    flex: 1;
+    margin-right: 20px;  /* Space between form and output */
+  }
+
   .form-group {
     margin-bottom: 1.5rem;
   }
@@ -67,19 +81,25 @@
     background-color: #45a049;
   }
 
-  .output-container {
-    margin-top: 2rem;
+  /* Output Section */
+  .output-section {
+    flex: 1;
+  }
+
+  .output-section h2 {
     text-align: center;
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
   }
 
   .output-box {
     padding: 1rem;
     border: 1px solid #ddd;
     border-radius: 4px;
     background-color: #fafafa;
-    margin-top: 1rem;
     font-family: monospace;
-    min-height: 100px;
+    min-height: 300px; /* Increase the height */
     white-space: pre-wrap;
+    overflow-y: auto;
   }