Like you can see in the video, the <dl> tags are arranged really weirdly. I could deal with some help 🙂

<ul className="divide-y divide-gray-700">
          {allResumes
            .slice(0)
            .reverse()
            .map((resumeItem) => {
              const { index, title, company, logo, href, startDate, endDate, description, tasks } =
                resumeItem
              return (
                <li key={index} className="py-12">
                  <div className="flex flex-col space-y-2 md:flex-row">
                    <dl>
                      <dd className="text-base font-medium leading-6 text-gray-400">
                        <div className="text-base font-medium leading-6">
                          <Link
                            href={href}
                            className="text-primary-500 hover:text-primary-400"
                            aria-label={company}
                          >
                            {company}
                          </Link>
                        </div>
                        {startDate} - {endDate}
                        <div>
                          <Image
                            src={logo}
                            width={100}
                            height={100}
                            alt="arrow"
                            className="rounded-md"
                          />
                        </div>
                      </dd>
                    </dl>
....