I would like to fully understand what happens when there are conflicts in baseline positioning and there are different vertical-align in adjacent inline elements. I’ve tried testing this on more complex scenarios but in a nutshell the baseline moves up or down based on what element comes first, and I can’t find an answer in the documentation to how these conflicts are resolved.

JSFiddle Demo

<div class="container">
  A
  <!-- swap foo with bar -->
  <div class="foo"> 
  B
  </div><div class="bar">
  C
  </div>
</div>

.container {
  color: white;
  background-color: black;
  width: 160px;
  border: 4px solid black;
}

.foo, .bar{
  display: inline-block;
  width: 60px;
  height: 60px;
}

.foo {
  background-color: orange;
  vertical-align: top;
}

.bar {
  background-color: yellowgreen;
  vertical-align: bottom;
}