Is there a way to remove the blank spaces after using transform:translate() in CSS?

As shown in the picture, I was trying to put the image from Col1 into correct position so I tried to use translateY to move it up. However that caused a blank gap between Col1 & Col2, so I tried to use translateY on Col2 too but it ended up leaving a blank space under it. Is there a way to remove the blank spaces?

My code FYI:

//Card
<div className="card bg-white text-[color:var(--vddBlue)] rounded-3xl
    m-auto mt-[12rem] p-1 w-[375px] h-auto grid grid-cols-1  
    md:grid-cols-2 md:w-[1440px]">

//Col1
  <div className="grid translate-y-[-10.25rem] scale-75"><img /></div>

//Col2
  <div className="faq grid self-center justify-center h-auto translate-y-[-9rem] 
   md:translate-y-[0rem]">

</div>