button with icon break vertical position alignment
I'm trying to keep two button on the same level, but the button with an icon in it breaks the vertical alignment. I've tried to Google for answer but I couldn't come up with the right keywords for this bug.
Desired behaviour
Two buttons stay on the same level vertically
Actual behaviour
The button with icon 'jumped' up from it's supposed position
I'm using tailwindcss and lucide icons.
I have not been very good at css and finding resources/solution related to css so any help is appreciated. Thanks in advanced!
The Code
3 Replies
you can either change the size of the icon or put flex/inline-flex on the parent element of the buttons
flex items-center gap-1
on the parent div will resolve your issueThanks @mannix_ and @Chris ! Flex solves the issue. Do you know why does the problem happen in the first place and how does flex solves it?
It seems to be something to do with the icon height. I tried to shrink the size of the icon and the button starts going to the other direction.