How to align text in input on top of div - html

Question

When putting a div behind another div the text in bot div elements is aligned.
.wrapper {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
padding-right: 20px;
}
.box {
height: 34px;
width: 130px;
padding: 6px 12px;
font-size: 24px;
font-family: Verdana;
color: #555555;
background: rgba(255, 255, 255, 0) none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.top {
z-index: 2;
position: relative;
}
.underlayer {
top: -48px;
z-index: 1;
position: relative;
background: rgba(255, 255, 255, 1);
color: #c8c8c8;
margin:0;
}
<div class="wrapper">
<div type="text" class="box top">20-123</div>
<div class="box underlayer">20-123-20</div>
</div>
When the div with class top is replaced with an input, the text is 1px off, though the border is still aligned correctly.
.wrapper {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
padding-right: 20px;
}
.box {
height: 34px;
width: 130px;
padding: 6px 12px;
font-family: Verdana;
font-size: 24px;
color: #555555;
background: rgba(255, 255, 255, 0) none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.top {
z-index: 2;
position: relative;
}
.underlayer {
top: -48px;
z-index: 1;
position: relative;
background: rgba(255, 255, 255, 1);
color: #c8c8c8;
margin:0;
}
<div class="wrapper">
<input type="text" value="20-123" class="box top">
<div class="box underlayer">20-123-20</div>
</div>
I can't put my head around it. Somebody here to explain it and suggest how to resolve this ?

Answer 1

This happens because of how inputs are handled. The textfield inside an input-element is streched to fit the box size. In this case 34px. So the fix is to increase the div's line-height to match the 34px of the input.
.wrapper {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
padding-right: 20px;
}
.box {
height: 34px;
width: 130px;
padding: 6px 12px;
font-family: Verdana!important;
font-size: 24px;
color: #555555;
background: rgba(255, 255, 255, 0) none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.top {
z-index: 2;
position: relative;
}
.underlayer {
top: -48px;
line-height: 34px;
z-index: 1;
position: relative;
background: rgba(255, 255, 255, 1);
color: #c8c8c8;
margin:0;
}
<div class="wrapper">
<input type="text" value="20-123" class="box top">
<div class="box underlayer">20-123-20</div>
</div>

Answer 2

You have a problem with your fonts.
You have one font for the underlayer and one for the other.
I also add a font-size and hide your second box so you can move the top position of your underlayer to match with the text on top.
It's probably not the best way to do it, but it works.
.wrapper {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
padding-right: 20px;
}
.box {
height: 34px;
width: 130px;
padding: 6px 12px;
font-size: 24px;
color: #555555;
background: rgba(255, 255, 255, 0) none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.top {
font-family: sans-serif;
z-index: 2;
position: relative;
}
.underlayer {
font-family: sans-serif;
font-size: 24px;
top: -44px;
left: 1px;
z-index: 1;
border: 0px solid #cccccc;
position: relative;
background: rgba(255, 255, 255, 1);
color: #c8c8c8;
margin:0;
}
<div class="wrapper">
<input type="text" value="20-123" class="box top">
<div class="box underlayer">20-123-20</div>
</div>

Answer 3

How to resolve it is here:
.wrapper {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
padding-right: 20px;
}
.box {
height: 34px;
width: 130px;
padding: 6px 12px;
font-size: 24px;
color: #555555;
background: rgba(255, 255, 255, 0) none;
border: 1px solid #cccccc;
border-radius: 4px;
}
.top {
z-index: 2;
position: relative;
}
.underlayer {
top: -48px;
z-index: 1;
position: relative;
background: rgba(255, 255, 255, 1);
color: #c8c8c8;
margin:0;
display: block;
tabindex: -1;
}
<div class="wrapper">
<input type="text" value="20-123" class="box top">
<input class="box underlayer" value="20-123-20">
</div>
You change underlayer from div to input. It changes second div's font to the one used by inputs. Because underlayer has lower z-index, it will never be selected by user, no it doesn't create any danger. You also set second input's display to block.
Unfortunately, I don't know why it originally happened, so I can't explain it.