app

src/App.css

@@ -20,22 +20,28 @@
   width: 100%;
 }
 
+/* The container for the absolute positioning */
 .row {
-  position: absolute; /* Required for virtualization */
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
+  padding: 0 1rem;
+  box-sizing: border-box;
+  border-bottom: 1px solid #2d3748;
+}
+
+/* The actual grid that forces alignment */
+.row-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  padding: 0 1rem;
   align-items: center;
-  border-bottom: 1px solid #2d3748;
+  height: 100%;
-  box-sizing: border-box;
 }
 
 .price-cell {
   text-align: right;
-  font-family: 'Courier New', Courier, monospace; /* Monospace keeps price digits aligned */
+  font-family: 'Courier New', Courier, monospace;
 }
 
 /* Ensure the price text is right-aligned to match professional dashboards */

src/App.tsx

@@ -29,10 +29,13 @@ export default function App() {
     className="row"
     style={{ transform: `translateY(${virtualRow.start}px)` }}
   >
-    <span>{data[virtualRow.index].symbol}</span>
+    <div className="row-inner">
-    <span className="price-cell">${data[virtualRow.index].price}</span>
+      <span>{data[virtualRow.index].symbol}</span>
+      <span className="price-cell">${data[virtualRow.index].price}</span>
+    </div>
   </div>
-))}        </div>
+))}
+</div>
       </div>
     </div>
   );