CSS - Vertical align span in div - html

Question

I know this question has been asked a lot and I have done considerable research on this point (here on Stack Overflow and elsewhere via Google, etc.) but I cannot find an answer which handles the point I am running into.
I have a dropdown with the following code:
HTML
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">[phone]</span>
<span class="email">temp#temp.com</span>
</div>
CSS
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span{
display: inline-block;
color: white;
}
I have also made a jsfiddle with the above code here.
I am trying to figure out how to get the two <span>s to be vertically centered in the dropdown.

Answer 1

Flexbox can do that
.dropdown {
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
display: flex;
align-items: center;
}
.dropdown .box {
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span {
display: inline-block;
color: white;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">[phone]</span>
<span class="email">temp#temp.com</span>
</div>

Answer 2

▶ 1st Option:
As, in your code, you use display: inline-block for all the span elements as well as .box, you can just add vertical-align: middle to your code as follows:
.dropdown .box, .dropdown span {
vertical-align: middle;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown .box,
.dropdown span {
vertical-align: middle;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">[phone]</span>
<span class="email">temp#temp.com</span>
</div>
▶ 2nd Option:
Another option you have is to change the display of .dropdown to display: flex and set align-items: center as shown below:
.dropdown {
display: flex;
align-items: center;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown {
display: flex;
align-items: center;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">[phone]</span>
<span class="email">temp#temp.com</span>
</div>

Answer 3

Try this one out:
HTML:
<div class="dropdown">
<div class="box">T</div>
<ul data>
<li><span class="phone-number">(999) 999-999</span></li>
<li><span class="email">temp#temp.com</span></li>
</ul>
</div>
CSS:
.data li{
list-style:none;
}