Search code examples
htmlcsstailwind-css

Delete button not aligned when displaying input errors


I'm using self-end to align the delete button (trash can) horizontally with the inputs. But there's a problem: when the error messages display, the delete button is misaligned again.

enter image description here

How would you solve this issue? I want the delete button to always be aligned with the inputs.

https://play.tailwindcss.com/G6V57WhEOY


Solution

  • The button has a class flex-end. Remove that and the button will go to the top since the container has a property of align-items: start. To align the button, you'll need to use margin-top to offset the height of labels on other components.