Vertically center a div in grid using Tailwindcss

I am trying to center a div present inside a CSS Grid horizontally and vertically. I am using TailwindCSS v3. Using mx-auto, I can align the content horizontally, but align-middle along with flexbox isn't showing any results. I am attaching the code snippet below.

<div className="grid grid-cols-6 mb-2"><div className="col-span-1"><div className="flex align-middle"><ImLocation className="text-lg text-black mx-auto" /></div></div><div className="col-span-5"><p className="text-sm md:text-base text-black">      Address Line 1, <br />      Address Line 2, <br />      Address Line 3</p></div></div>

The issue here is that the first inner-div (with class col-span-1) has a smaller height than the other div. I want that div to align in the center with the other div vertically. ImLocation is a React.js icon that I have used.