CODEWITHSUNDEEP
css
Madsen
Madsen

Reputation: 293

Textarea with padding vertical-align top next to label

When I add padding to my textarea then vertical-align top does not work.

Browser: Firefox

CSS:

.form-aligned textarea-label {
    vertical-align: top;
    display: inline-block;
    width: 120px;
    text-align: left;
}

textarea {
    padding: 6px 12px;
}

I am looking for a result like this but with padding added to textarea:

enter image description here

It drives me crazy it should be simple :-)

Upvotes: 0

Views: 767

Answers (1)

Magood
Magood

Reputation: 106

You need to use divs to separate the label from the textarea.

<div style="float:left;">
<label>Incident: </label>
</div>
<div style="float:left;">
<textarea id="txtIncident"></textarea>
</div>

label {
    vertical-align: top;
    width: 120px;
    text-align: left;
}

textarea {
    padding: 6px 12px;
}

https://jsfiddle.net/7z0uwtLu/

Upvotes: 1

Related Questions