How to vertically align a text along with a double sized icon font icon in tailwindcss

[ppshobi]

I have following template

<td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-black-500">
    <i class="las la-circle-notch text-3xl"></i>
    <span>Provisioning</span>
</td>

now the template gets rendered as follows

As you can see the text Provisioning is out of alignment. how to fix this?

[simonswiss]

Typically, you'd wrap both your icon and text in a flex container, with items-center to vertically align them.

In your example markup, you should be able to add the flex items-center classes to the td element. You can also add a space-x-2 class to handle the horizontal spacing between the icon and the text! 👍

See https://tailwindcss.com/docs/align-items#center for more details!