Why is vertical-align affecting the previous (same scope) element? - html

Question

<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>Some text</span>
</div>
</div>
<div id="hero-right">
</div>
</div>
As you can see, #hero-left, comes before #hero-right, but for some reason, #hero-left is being pushed down all the way to the bottom until the text in the <span> aligns with the baseline of #hero-right.
I thought it was very odd behaviour since this hasn't happened to me before, so I started messing around with setting vertical-align: top, but even stranger is that nothing happened when I set that property value in any of the relevant elements... eventually, I randomly tried placing that same property value into #hero-right, and Voila... by setting that value to the latter element, the former is affected...
Why does this happen? I was taught that vertical-align only affects itself and inherently the position of its children (based off itself), yet it won't affect itself, its parent, its parent's parent... What am I missing?
WORKING EXAMPLE:
body {
font-family: 'Kanit', sans-serif;
margin: 0;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header-left {
margin: auto 0 auto 25px;
}
#header-left>img {
height: 50px;
margin: auto 0;
}
#header-right {
margin: auto 0 auto auto;
}
#header-list {
list-style-type: none;
display: inline-block;
margin: auto 0;
}
#header-list>li {
display: inline;
font-weight: bold;
font-size: 13px;
}
#header-list>li>a {
text-decoration: none;
color: black;
}
#header-list>li>a:hover {
color: #2C85D0;
}
#vertical-spacer {
height: 26px;
width: 1px;
margin: 0px 5px;
display: inline-block;
background-color: darkgray;
vertical-align: middle
}
#navbar {
height: 60px;
background-color: #252835;
}
.menu-left {
margin: 0;
padding: 0;
height: 100%;
font-size: 0;
}
.menu-left>li {
text-decoration: none;
display: inline-block;
height: 100%;
}
.menu-item-div {
height: 100%;
width: 200px;
border-right: 1px solid darkgray;
}
.menu-item-div>span {
line-height: 60px;
margin-left: 20px;
font-size: 18px;
color: white;
}
#section-type {
height: 100px;
background-color: darkgrey;
}
#section-type>span {
line-height: 100px;
margin-left: 20px;
font-size: 35px;
}
#hero {
height: 1000px;
background-color: red;
font-size: 0;
}
#hero-left {
display: inline-block;
width: 20%;
height: 100%;
background-color: blue;
font-size: 13px;
}
#hero-right {
display: inline-block;
width: 70%;
height: 100%;
background-color: orange;
font-size: 18px;
}
#selectors-div {
height: 100%;
}
#selectors-div>span {}
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<div id="header" class="wrapper">
<div id="header-left">
<img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
</div>
<div id="header-right">
<ul id="header-list">
<li><span style="font-weight: normal;">Welcome</span></li>
<li>Username</li>
<li><span id="vertical-spacer"></span></li>
<li>Inventory</li>
<li><span id="vertical-spacer"></span></li>
<li>Favorite Parts</li>
<li><span id="vertical-spacer"></span></li>
<li>Saved Parts Lists</li>
<li><span id="vertical-spacer"></span></li>
<li>Log Out</li>
<li><span id="vertical-spacer"></span></li>
<li>Canada</li>
<li><span id="vertical-spacer"></span></li>
</ul>
</div>
</div>
<div id="navbar" class="wrapper">
<ul class="menu-left">
<li>
<div class="menu-item-div">
<span>Desktop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Laptop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>All-in-One</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Mini</span>
</div>
</li>
</ul>
</div>
<div id="section-type" class="wrapper">
<span>Choose a Desktop</span>
</div>
<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>a</span>
</div>
</div>
<div id="hero-right" style="vertical-align: top;">
</div>
</div>
BROKEN EXAMPLE
body {
font-family: 'Kanit', sans-serif;
margin: 0;
}
.wrapper {
width: 80%;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header-left {
margin: auto 0 auto 25px;
}
#header-left>img {
height: 50px;
margin: auto 0;
}
#header-right {
margin: auto 0 auto auto;
}
#header-list {
list-style-type: none;
display: inline-block;
margin: auto 0;
}
#header-list>li {
display: inline;
font-weight: bold;
font-size: 13px;
}
#header-list>li>a {
text-decoration: none;
color: black;
}
#header-list>li>a:hover {
color: #2C85D0;
}
#vertical-spacer {
height: 26px;
width: 1px;
margin: 0px 5px;
display: inline-block;
background-color: darkgray;
vertical-align: middle
}
#navbar {
height: 60px;
background-color: #252835;
}
.menu-left {
margin: 0;
padding: 0;
height: 100%;
font-size: 0;
}
.menu-left>li {
text-decoration: none;
display: inline-block;
height: 100%;
}
.menu-item-div {
height: 100%;
width: 200px;
border-right: 1px solid darkgray;
}
.menu-item-div>span {
line-height: 60px;
margin-left: 20px;
font-size: 18px;
color: white;
}
#section-type {
height: 100px;
background-color: darkgrey;
}
#section-type>span {
line-height: 100px;
margin-left: 20px;
font-size: 35px;
}
#hero {
height: 1000px;
background-color: red;
font-size: 0;
}
#hero-left {
display: inline-block;
width: 20%;
height: 100%;
background-color: blue;
font-size: 13px;
}
#hero-right {
display: inline-block;
width: 70%;
height: 100%;
background-color: orange;
font-size: 18px;
}
#selectors-div {
height: 100%;
}
#selectors-div>span {}
<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
<div id="header" class="wrapper">
<div id="header-left">
<img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
</div>
<div id="header-right">
<ul id="header-list">
<li><span style="font-weight: normal;">Welcome</span></li>
<li>Username</li>
<li><span id="vertical-spacer"></span></li>
<li>Inventory</li>
<li><span id="vertical-spacer"></span></li>
<li>Favorite Parts</li>
<li><span id="vertical-spacer"></span></li>
<li>Saved Parts Lists</li>
<li><span id="vertical-spacer"></span></li>
<li>Log Out</li>
<li><span id="vertical-spacer"></span></li>
<li>Canada</li>
<li><span id="vertical-spacer"></span></li>
</ul>
</div>
</div>
<div id="navbar" class="wrapper">
<ul class="menu-left">
<li>
<div class="menu-item-div">
<span>Desktop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Laptop</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>All-in-One</span>
</div>
</li>
<li>
<div class="menu-item-div">
<span>Mini</span>
</div>
</li>
</ul>
</div>
<div id="section-type" class="wrapper">
<span>Choose a Desktop</span>
</div>
<div id="hero" class="wrapper">
<div id="hero-left">
<div id="selectors-div">
<span>a</span>
</div>
</div>
<div id="hero-right">
</div>
</div>
</body>
</html>