How can I make my calendar occupy the half of my website? using Shadcn

I'm trying to create a scheduling appointment system, I'm trying to make the calendar occupy the half of my page, but even though I tried to increase it's height and width, it doesn't change anything.

Home.tsx

import { Calendar } from '@/components/ui/calendar'import React from 'react'export default function Home() {  return (<div className='w-full  px-8'><div className='flex gap-x-2'><div className='flex-1 h-[650px] w-full  bg-blue-200'><Calendar className='h-full w-full' /></div><div className='flex-1'>2</div></div></div>  )}