I have a textarea and a button. I wanted them to be placed in the same horizontal line from the bottom. However, when I place them inline with no style applied, there is extra margin at the bottom of the textarea that is causing them not to align properly:
I'm struggling to understand why this is happening. What is causing this extra margin below the text area? Interestingly, when I do the same thing with form inputs, they appear fine as shown in image 2:
So what exactly is causing the textarea to behave like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
textarea, button {
margin: 0;
}
</style>
</head>
<body>
<div>
<textarea>textarea</textarea>
<button>Button</button>
</div>
</body>
</html>