React swiper height and width

Question

I'm using swiper library for react app.

The Swiper component has this weird space that I don't know how to fill and also I don't know how to set up the height for it.

I am trying to get the blank space highlighted in orange to fill with Card component and the height be equal to the card on the right.

The Swiper component and the Card component on the right are here:

import { CompaniesList, CreateNewCompany } from "@calyx/features/user";
import { useEffect } from "react";

/* eslint-disable-next-line */
export interface UserCompaniesProps {}

export function UserCompanies(props: UserCompaniesProps) {
  return (
    <div className="flex">
      <CompaniesList />
      <CreateNewCompany/>
    </div>
  );
}

export default UserCompanies;

CompaniesList that uses Swiper is here:

import { CompanyModel } from "@calyx/api";
import { authAtom } from "@calyx/features/auth";
import { useUserActions } from "@calyx/features/user";
import { Card, PrimaryButton, ProductIcon, PText, PTextType } from "@calyx/shared/ui";
import { useEffect, useState } from "react";
import { useRecoilValue } from "recoil";
import { userAtom } from "../../../atom/user_atom";

// Import Swiper React components
import { Navigation, Pagination, Scrollbar, A11y, Mousewheel } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

/* eslint-disable-next-line */
export interface CompaniesListProps {}

export function CompaniesList(props: CompaniesListProps) {
  const userActions = useUserActions()
  const userState = useRecoilValue(userAtom); 
  const authState = useRecoilValue(authAtom);

  const [userCompanies, setUserCompanies] = useState<Array<CompanyModel>>([])

  useEffect(() => {
    console.log("useEffect() -> Portfolio / UserCompanies / CompaniesList")
    const userId = authState.auth?.userId as string
    userActions.fetchUserCompanies(userId).then((result) => {
      setUserCompanies(result.companies)
    })
  }, [])

  return (
    <Swiper
      mousewheel={true}
      autoHeight={true}
      direction="horizontal"
      modules={[Navigation, Pagination, Scrollbar, A11y, Mousewheel]}
      spaceBetween={30}
      slidesPerView={2}
      navigation={true}
      className="w-1/2"
      observeParents={true}
    >
      {userCompanies.map((userCompany: CompanyModel, index: number) => {
        console.log(userCompany)
        return <SwiperSlide 
          className="h-screen"
          key={index}
        >
          <UserCompany company={userCompany}/>
        </SwiperSlide>
      })}
    </Swiper>
  );
}

export interface UserCompanyProps {
  company: CompanyModel;
}

export const UserCompany = ({
  company,
  ...props
}: UserCompanyProps) => {
  return (
    <Card className="bg-background-dark flex">
      <div className="p-4 z-10">
        <PText type={PTextType.p3} className="text-base-300">On-boarding</PText>
        <PText type={PTextType.p1} className="font-semibold text-base-100">Register new entity</PText>
        <PrimaryButton
          text="Create new entity"
          className="!bg-secondary-400 mt-3 text-text-base-900"
          onClick={()=>{}}
        />
      </div>
    </Card>
  )
}

export default CompaniesList;

CreateNewCompany component:

import { Card, PrimaryButton, PText, PTextType, PurplePetalsRightCornerImage } from "@calyx/shared/ui";
import { useNavigate } from "react-router-dom";

/* eslint-disable-next-line */
export interface CreateNewCompanyProps {}

export function CreateNewCompany(props: CreateNewCompanyProps) {
  const navigate = useNavigate();
  return (
    <Card className="relative bg-background-dark w-1/3 flex justify-between">
      <div className="p-4 z-10">
        <PText type={PTextType.p3} className="text-base-300">On-boarding</PText>
        <PText type={PTextType.p1} className="font-semibold text-base-100">Register new entity</PText>
        <PrimaryButton
          text="Create new entity"
          className="!bg-secondary-400 mt-3 text-text-base-900"
          onClick={()=>navigate("/onboarding_company", { replace: false })}
        />
      </div>
      <img
        className="absolute right-0 h-full"
        src={PurplePetalsRightCornerImage()}
        alt="Background petal decoration"
      />
    </Card>
  );
}

export default CreateNewCompany;

I am using Tailwind css so I tried to set specific height and width to Swiper something like this:

<Swiper
   className="h-full w-full"
   ...
>
   ...
</Swiper>

I tried also with tailwind css negative margin and padding options for example -mx-10 and -px-10 Swiper also has it own height and width attributes so I tested those as well, but nothing so far works for me.