vertically align a div and a span using css - html

Question

please see the jsfiddle project here . How to horizontally align the box and the label?
.box {
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid;
}
.legend {
horizontal-align: middle;
}
<div class="legend">
<div class="box" style="background-color: red;">
</div>
<span>Alabama</span>
</div>

Answer 1

I assume you mean vertically align? If you are simply trying to align, vertically, two div of unequal height then display: inline-block is the simplest and most effective method. You almost had it with your code, but float breaks it. Don't use float!
.box {
background-color: red;
border: 1px solid;
height: 20px;
width: 30px;
}
.box,
.legend {
display: inline-block;
vertical-align: middle;
}
<div class="box"></div>
<div class="legend">Alabama</div>
enter link description here

Answer 2

Setting the vertical-align property on the .box div would seem to make the most sense and cause the least issues.
.box {
display: inline-block;
height: 20px;
width: 30px;
border: 1px solid;
vertical-align: middle;
}
<div class="legend">
<div class="box" style="background-color: red;">
</div>
<span>Alabama</span>
</div>

Answer 3

You can float the box instead of displaying it inline. There's a couple different ways to align these.
https://jsfiddle.net/cckxkvov/5/
.box {
float: left;
height: 20px;
width: 30px;
border: 1px solid;
}
.legend {
horizontal-align: middle;
}
span {
display: inline-block;
line-height: 20px;
}

Answer 4

Why not use flexbox?
If you're trying to vertically align the two items within .legend then just apply these styles:
.legend {
display: flex;
align-items: center;
}
Keep in mind you will need to apply prefixes for cross-browser compatibility.