How to use the Next.js Image component to fill parent's container height AND let the width overflow the parent container?

Question

I am trying to set a fancy responsive alternate layout in next.js. The layout is 38%/62% width-wise and I need an image in the 38% part (left) to overflow under another image on the 62% part (right).

I have tried setting absolute properties but this is problematic because it does not shrink the same as the rest of the layout and is not relative to the position of the wrapper. Leaves me object-cover which crops the image outside the parent container. If object-cover could let the image overflow on the x-axis it would do exactly what I want ... but it doesn't.

The code fragment below shows where I am with it. It uses tailwind-css properties. The first part (First Row Item) is the problem. Either I get the image to fill the container's width in which case there is evidently no overflow but it is too small height wise, or I get the image to fill the height of the container but the overflow part is cropped. The latter is the current behaviour returned by the below code.

<section className="relative w-full px-8 py-16">
      {" "}
      <div className="wrapper max-w-screen-xl mx-auto">

        {/* Section First Row Item */}
        <div className="alternateLayout flex flex-col md:flex-row justify-center mt-8 mx-auto py-0 md:py-0 items-center border-[1px] border-black">
          {/* Image bananaPeel should fill the height of the alternateLayoutImage container and overflow it to the right */}
          <div className="alternateLayoutImage md:w-[38%] aspect-[10/9] flex-shrink-0 relative bg-black overflow-x-visible">
            <Image
              src={bananaPeel}
              alt={"Banana Peel"}
              width={561}
              height={512}
              className="rounded-none object-cover object-left h-full mx-auto"
            />
          </div>

          {/* Content Right */}
          <div
            className={`alternateLayoutContent md:w-auto md:h-auto md:mr-[51px] md:ml-[51px] md:mt-0 md:order-last items-center`}
          >
            <h2 className="text-Display-md-Bold md:text-Display-xl-Bold my-2 text-left text-black_txt">
              {"Title row section"}
            </h2>
            <Image
              src={mainImageSection}
              alt={""}
              width={560}
              height={511}
              className="rounded-none object-cover object-center h-full mx-auto"
            />
          </div>
        </div>
        {/* End Row Item */}

        {/* Section Second Row Item */}
        <div className="alternateLayout flex flex-col md:flex-row justify-center mx-auto py-0 md:py-0 items-center">
          {/* Image */}
          <div className="alternateLayoutImage md:w-[38%] flex-shrink-0 relative overflow-hidden">
            <Image
              src={img2}
              alt={"img2"}
              width={560}
              height={511}
              className="rounded-none object-cover object-center aspect-[10/9] border-0 border-black_txt"
            />
          </div>

          {/* Content Left */}
          <div
            className={`alternateLayoutContent md:w-auto md:h-auto md:mt-0 md:ml-[51px] md:mr-[51px] md:order-first items-center`}
          >

            <p>
              {
                "Lorep ipsum"
              }
            </p>

          </div>
        </div>
        {/* End Row Item */}
      </div>
    </section>

dependencies: "next": "13.3.4", "postcss": "8.4.23", "prop-types": "^15.8.1", "react": "18.2.0", "react-dom": "18.2.0", "tailwindcss": "3.3.2"