I don't see the '...' after setting text-ellipsis, overflow hidden and nowrap on this div.

Here's my code:

import Image from "next/future/image";
import Link from "next/link";

export default function MenuOption({ title, description, icon, route }) {
  return (
    <Link href={route}>
      <div className="flex h-[74px] w-full cursor-pointer gap-4 overflow-hidden text-ellipsis rounded-lg bg-gray-50 p-4 ring-1 ring-gray-300 drop-shadow-sm hover:ring-2">
        <Image src={icon} alt={`${title} Icon`} className="mt-1 h-5 w-auto" />
        <div className="float-left inline-block overflow-hidden text-ellipsis whitespace-nowrap">
          <h2 className="text-md font-medium text-gray-900">{title}</h2>
          <p className="text-sm text-gray-500">{description}</p>
        </div>
      </div>
    </Link>
  );
}