Issue with custom table in ReactJS - html

Question

I am trying to create a custom table as per the design and I am using Tailwind CSS for styling. I initially used table tags in HTML, but I was unable to style it properly, so I switched to using divs. However, I am facing an issue with the width size of the table head and row. The width is not consistent due to the content of the cells, can anyone please help me in resolving this issue?
Design:
What I get using div instead of table tags:
code:
<div className="flex flex-col">
<div className='flex text-sm font-bold text-gray-500'>
<div className='w-[170px] mr-2'>ລູກຄ້າ</div>
<div className='w-[140px] mr-2'>ປະກັນໄພ</div>
<div className='w-[120px] mr-2'>ບໍລິສັດ</div>
<div className='w-[90px]'>ວັນທີເລີ່ມຕົ້ນ</div>
<div className='w-[90px]'>ວັນທີສິ້ນສຸດ</div>
<div className='w-[90px]'>ສະຖານະ</div>
<div className='flex-1'>ຄ່າທຳນຽມ</div>
<div className='w-[170px]'></div>
</div>
</div>
<hr />
<div className='max-h-[700px] overflow-y-scroll shadow-sm insuranceReport rounded-b bg-white'>
{
orders?.map((order, index)=>(
<div key={index} className={`flex items-center px-5 ${index%2 == 0 ? 'bg-[#F5FCF5]' : 'bg-[#FFFFFF]'} py-4 text-sm hover:opacity-80`}>
<div className='w-[170px] flex items-center mr-2 font-sans text-sm'>
<div className="w-[2.3rem] h-[2.3rem] mr-2 rounded-full overflow-hidden aspect-square">
<img
src={
GetImageUrl(order?.profile, true)
}
alt={order?.name}
className="object-cover w-full h-full"
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src= IMAGE_NOT_FOUND;
}}
/>
</div>
<div className='flex flex-col'>
<Link className='cursor-pointer hover:underline' to={`/sale/${order?.uuid}`}>
<span>{order?.customer?.name}</span>
</Link>
<span className='text-sm opacity-80'>{order?.customer?.gender}</span>
</div>
</div>
<div className='w-[140px] mr-2 text-sm'>{order?.product}</div>
<div className='w-[120px] mr-2 text-sm'>{order?.company}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateStart)}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateEnd)}</div>
<div className='w-[90px] text-sm'><span className={SaleStatusChecker(order?.status)?.color}>{SaleStatusChecker(order?.status)?.status}</span></div>
<div className='flex-1 text-sm'>₭ {order?.totalPrice?.toLocaleString()}</div>
<div className='flex items-start gap-3 text-sm'>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>navigate(`/sale/${order?.uuid}`)}><FontAwesomeIcon icon={faEye}/> ລາຍລະອຽດ</button>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>handleOpenOrderUpdateModal(order?.uuid)}><FontAwesomeIcon icon={faPenToSquare}/> ແກ້ໄຂ</button>
</div>
</div>
))
}
{
(orders?.length == 0 || orders == undefined || orders == []) && !isFetching ? <Empty/> : ""
}
{
isFetching &&
<LoadingData/>
}
</div>
</div>
I don't want to use flex and set a static width size of the div element. Is there any alternative solution to this issue?
Thank you in advance for your help!