Align textarea and button by their bottom

Coding - Bugfix

Background

I created a website that contains a textarea and a button. And here are the source codes:

index.html
1
2
3
4
5
<div>
    <label for="feelings">How are you feeling today?</label>
    <textarea id="feelings" placeholder="Enter your feelings here" rows="9" cols="50"></textarea>
    <button type = "submit">Generate</button>
</div>
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
textarea{
    background:#22b2da;
    color: #f0d43a;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
}

button{
    width: 400px;
    height: 100px;
    background: #3b4a6b;
    color: #f0d43a;
    font-size: 26px;
    font-family: 'Oswald', sans-serif;
    border: none;
    box-shadow: 2px 4px 5px #444;
}

Problem

I tried to align the textarea and button by their bottom, but they are baseline alignment by default.

Solution

Adding vertical-align: bottom to the textarea rule can fix that problem:

style.css
1
2
3
4
5
6
7
textarea {
    background:#22b2da;
    color: #f0d43a;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    vertical-align: bottom
}





References

Why is my textarea higher up than its neighbor?

input和button在同一行时，没有水平对齐的情况

How to align text and button by bottom