How to place a div between 2 inputs, vertical alligned [duplicate] - html

Question

This question already has answers here:
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 5 years ago.
How can i put i div between 2 inputs, having same heights, vertical aligned? It sounds simple, and i don't understand why the following code don't work:
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
}
input:first-child{
border-right: none;
}
input:nth-child(3){
border-left: none;
}
#between_inputs{
width: 10px;
height: 18px;
display: inline-block;
background-color: white;
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max" placeholder="max."/>
Somehow the div is placed above the inputs? What is wrong?

Answer 1

You can do it with the Flexbox:
.flex {
display: flex; /* displays flex-items (children) inline */
}
input {
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
}
input:first-child {
border-right: none;
}
input:nth-child(3) {
border-left: none;
}
#between_inputs {
/* flex-grow: 1; recommended, grows and takes the remaining horizontal space */
width: 10px;
/* height: 18px; not necessary, flex-items have the same height by default */
display: inline-block;
background: Lavender; /* just for demo */
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
}
<div class="flex">
<input type="text" name="min" placeholder="min.">
<div id="between_inputs"></div>
<input type="text" name="max" placeholder="max.">
</div>

Answer 2

Add vertical-align to input:
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
vertical-align: top;/* <<<< this one */
}

Answer 3

You could add vertical-align: middle for both inputs and div , and decrease the height of div to make it 17px so they will be perfectly aligned.
input{
width: 35%;
border: 1px solid #A7A7A7;
display: inline-block;
font-size: 11px;
padding: 0 5px;
line-height: 18px;
vertical-align: middle
}
input:first-child{
border-right: none;
}
input:nth-child(3){
border-left: none;
}
#between_inputs{
width: 10px;
height: 17px;
display: inline-block;
background-color: white;
border-top: 1px solid #A7A7A7;
border-bottom: 1px solid #A7A7A7;
line-height: 18px;
vertical-align: middle
}
<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max" placeholder="max."/>