Text and icon not aligned vertically

[dipsor]

Describe the bug The text inside of the list does not seem to be vertically centred with the svg icon.

To Reproduce add into nextjs app using tailwind

Expected behavior text should be aligned vertically in center with the svg icon

Screenshots

After fixes:

Desktop (please complete the following information): mac os chrome

Additional context Removing padding top and changing list style from align-items: flex-start into align-items: center seems to fix the issue.

Suggestion It would be handy to be able to apply some styles directly to the li element

[sators]

Hi @dipsor - The current styling of the group is to align flex-start in order to allow the text to wrap and keep the icon aligned to the top line. However, it is possible for these margin/paddings to be off slightly based on the font-size that you are dropping the component into. You still should be able to target the elements using .invalid or .valid classnames which are already put onto the li tags. Furthermore, you could target .invalid span or .invalid svg, etc. to apply styles to the nested elements.

However, I'm open to pull requests if you think that this should be done differently within the library!