create inputfield with span on the right side - html

Question

First: I dont use bootstrap, I want to build this, without bootstrap.
I want to create this
,but I dont know how to handle the span on the right side of the input field. Here is my try.
.input_register{
padding: 5px;
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
padding: 5px;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>
Why is the span higher as the inputfield?

Answer 1

display: inline-block;
inline-block displays similar characteristics as an inline element while being able to alter the sizing like a block element.
Setting line-height: 1em sets the height of the containing block equal to the size of the font. In this case I've used line-height: 1.5em to give it some extra space.
Also, vertical padding on these elements yields unexpected results, using line-height instead gives a more consistent appearance.
.input_register,
.register_span {
display: inline-block;
font-size: 12pt;
line-height: 1.5em;
padding: 0px 5px;
}
.input_register{
border: 2px solid green;
}
.input_register:hover{
border: 2px solid #151A22;
}
.input_register:focus{
border: 2px solid #151A22;
}
.register_span{
background-color: red;
border: 2px solid #151A22;
border-left: none;
}
<div class="input_group">
<input class="input_register" type="text"/><span class="register_span">D</span>
</div>