Flight Detail Card

<div className="border border-gray-300 rounded-xl">
  <div className="flex flex-col h-full md:flex-row gap-7">
    <div className="flex flex-col items-center justify-center gap-1 p-5">
      <p className="text-gray-600">From</p>
      <h5 className="text-lg font-semibold">New York</h5>
      <p className="max-w-[15rem] line-clamp-2 text-center">
        John F. Kennedy International Airport
      </p>
    </div>
    <div className="flex flex-col items-center justify-center gap-1">
      <div className="grid bg-orange-500 rounded-full w-9 h-9 place-items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          className="w-4 h-4 text-white"
        >
          <path
            fillRule="evenodd"
            d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z"
            clipRule="evenodd"
          />
        </svg>
      </div>
      <p className="text-center">Non-stop</p>
      <p className="mt-0 text-center">0hr 05 minutes</p>
    </div>
    <div className="flex flex-col text-center items-center justify-center gap-1">
      <p className="text-gray-600">To</p>
      <h5 className="text-lg font-semibold">London</h5>
      <p>London City Airport</p>
    </div>
    <div className="flex flex-col items-center gap-1 p-6 bg-[#FAE6E1] rounded-r-xl md:w-48">
      <p className="text-xs text-gray-600">$9,560</p>
      <p className="mt-0 text-xs text-center text-gray-600">*20%OFF</p>
      <p className="mt-0 font-semibold">$7,560</p>
      <div className="mt-4">
        <button className="block px-4 py-2 mb-2 text-sm text-white bg-orange-500 rounded-md">
          Book Now
        </button>
        <a href="#" className="mx-2 no-underline hover:text-black">
          show more
        </a>
      </div>
    </div>
  </div>
</div>