these two have the same height of 9vh but are being displayed with different height

  <div
   
        className="flex items-center w-full h-[9vh] border-b-[0.5px] border-[#524FA4] cursor-pointer"
      >

<section
        className={` h-[9vh] flex items-center justify-between px-[25px] md:px-[36px]`}
      >

I am trying to match the height of two components but I am getting different heights even after using 9vh as the height of both of them