I try to align the bottom border of an input element and a textarea so that both bottom borders of the input and the textarea are exacty aligned and on the same line. Both the input element and the textarea are inside a table. I build my table with divs (display: {table, table-row-groupe, table-row and table-cell}. So far, I have not been able to solve the problem and when I view the page in Firefox and Microsoft Edge, the bottom borders which I indicated with white color (on a black background) are not horizontally aligned.
Therefore I’m going to provide here a working test case, so that you might be able to reproduce easily and instantly my problem.
Note : For this test case to work, both CSS and HTML file must be in the same directory.
The HTML file (test.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alignment example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Input and Textarea align example">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #000000;">
<div style="width: 60%;">
<div class="DivTab">
<div class="DivTabBody">
<div class="DivTabRow">
<div class="DivTabCell" style="width: 30%;">
<input id="paramKey" type="text" class="KeyClass">
</div>
<div class="DivTabCell" style="width: 70%;">
<textarea id="paramValue" rows="1"
spellcheck="false" class="ValueClass"></textarea>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The CSS file (styles.css):
.DivTab {
display: table;
width: 100%;
height: 100%;
color: #ffffff;
background-color: #000000;
}
.DivTabBody {
display: table-row-group;
}
.DivTabRow {
display: table-row;
background-color: #000000;
}
.DivTabCell {
display: table-cell;
vertical-align: middle;
text-align: start;
padding-top: 0px;
padding-bottom: 0px;
color: #cfd0ce;
background-color: #000000;
}
.KeyClass {
background-color: #000000;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
border: none;
border-bottom: solid #ffffff 1px;
width: 100%;
font-family: Consolas;
}
.ValueClass {
background-color: #000000;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
border: none;
border-bottom: solid #ffffff 1px;
margin-left: 5px;
resize: none;
width: 95%;
font-family: Consolas;
overflow-y: hidden;
}
Could you kindly indicate, where is my mistake and how can I make these two bottom borders aligned?
Thanks in advance.