Got Delayed in the Suez Canal

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -40,6 +40,10 @@
     line-height: normal;
 }
 
+.timeAndGrid {
+    display: flex;
+}
+
 .timeColumn {
     display: flex;
     min-height: 573px;

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -31,19 +31,20 @@ const Calendar: React.FC = (props) => {
         ))}
       </div>
       {/* Displaying the rest of the calendar */}
-      <div className={styles.timeColumn}>
-        {hoursOfDay.map((hour) => (
-          <div key={hour} className={styles.timeLabelContainer}>
-            <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
-          </div>
-        ))}
+      <div className={styles.timeAndGrid}>
+        <div className={styles.timeColumn}>
+          {hoursOfDay.map((hour) => (
+            <div key={hour} className={styles.timeLabelContainer}>
+              <span>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</span>
+            </div>
+          ))}
+        </div>
+        <div className={styles.calendarGrid}>
+          {grid.map((row, rowIndex) => (
+            row
+          ))}
+        </div>
       </div>
-      <div className={styles.calendarGrid}>
-        {grid.map((row, rowIndex) => (
-          row
-        ))}
-      </div>
-
     </div>
   )
 };