Does a TextArea component affect its siblings? Why does this happen (video)
As you can see, when this is an
input the button next to it is centered in the div. When it's changed to textarea (and that's ALL that changes) suddenly it's out of whack and the button is resting on the bottom. There are no CSS class changes or anything else changing - only the element type.
Is this normal?2 Replies
it has to do with it being an inline element that by default vertical-aligns to the baseline. when you make it an input. visualy it looks centered, but you'll see the placeholder and button text are still aligning the same
my suggestion in this case, make the div (which they are in) flex or grid to vertical align them
If you look at the space below the inputs and the text area you'll see it's the same on every line. I can't be sure with just a video but either the elements have a
vertical-align (like Mark pointed out) or a margin-bottom that are pushing them up from the bottom of the container.
The inputs looking center is just a coincidence (and if you check they aren't exactly centered) because the container's height is dictated by the biggest element. For the groups with inputs it's the button but for the last one it's the text area
The button in the last one is at the bottom because buttons are inline elements by default so the line up with the bottom of the line of text (e.i. the bottom of the container). If you set them to display: block they should jump to the top (and have their margins change a bit... But that's a detail)