Align the card dates into 2 columns instead of 1

src/components/JobCardDetails.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { Calendar, Factory, Clock } from 'lucide-react';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
@@ -101,12 +100,13 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
 
   return (
     <div className="flex-shrink-0">
-      <div className="grid grid-cols-1 gap-2">
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2">
         <div className="flex items-center gap-2 text-sm text-gray-400">
           <Factory className="w-4 h-4" />
           <span className="w-16">Job ID:</span>
           <span>{job.id}</span>
         </div>
+
         <div className="flex items-center gap-2 text-sm text-gray-400">
           <Calendar className="w-4 h-4" />
           <span className="w-16">Created:</span>
@@ -119,6 +119,7 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
           fieldName="jobStart"
           icon={<Clock className="w-4 h-4" />}
         />
+
         <DateField
           label="End"
           value={job.jobEnd}
@@ -132,6 +133,7 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
           fieldName="saleStart"
           icon={<Calendar className="w-4 h-4" />}
         />
+
         <DateField
           label="Sale End"
           value={job.saleEnd}