How to left align textareas within different divs? - html

Question

I want to left align the textareas within two different divs.
Below is what have tried, but it doesn't work.
.credentials {
margin-top: -5px;
background-color: black;
}
label {
margin-left: 20px;
color: white;
vertical-align: middle;
}
textarea {
vertical-align: middle;
height: 25px;
margin-top: 10px;
margin-left: 30px;
}
.username {
height: 50px;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
It outputs the following result:

Answer 1

Try this CSS table layout (no markup changes). Set the container div as table, and two inner divs as table-row, and label + textarea as table-cell, with some other CSS adjustments, see the comments in the code snippet.
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.username, .key {
display: table-row;
}
label, textarea {
display: table-cell;
vertical-align: middle; /*or top/bottom*/
}
label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>
Edit: as one of the comment below pointed out using <input> elements rather than <textarea>, and I think that makes sense. See the updated code snippet.
.credentials {
display: table;
width: 100%;
background: black;
border-collapse: separate;
border-spacing: 10px; /*for spacing*/
}
.credentials .username,
.credentials .key {
display: table-row;
}
.credentials label,
.credentials input[type="text"],
.credentials input[type="password"]{
display: table-cell;
vertical-align: middle;
padding: 4px;
}
.credentials label {
width: 1%; /*small value*/
white-space: nowrap; /*prevent wrapping*/
color: white;
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<input type="text">
</div>
<div class="key">
<label>Activation key:</label>
<input type="password">
</div>
</div>

Answer 2

There is more than one way to achieve this, answer of Pangloss is nice but i like to suggest something different also without touching the code.
I would never use textarea for this kind of work
calc is a relative new thing check your search engine for more information
If you don't know the < selector in css i suggest to look over here
.credentials {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
/*fallback color if nothing is found*/
}
.credentials > div > label {
display: inline-block;
min-width: 150px;
/*maximum width of label*/
text-align: right;
/*style*/
padding: 5px;
/*style*/
}
/*extra to make sure it never flip under label and stay inside view*/
.credentials > div > textarea {
max-width: calc(100% - (150px + 5px + 5px + 8px + 8px + 1px + 1px));
/* min-width + padding-left + padding-right + margin-left + margin-right + border-left + border right OR just 178px */
}
<div class="credentials">
<div class="username">
<label>Username:</label>
<textarea></textarea>
</div>
<div class="key">
<label>Activation key:</label>
<textarea></textarea>
</div>
</div>