How to prevent text collapsing in inline-block columns

Question

I'm making a circle with 4 divs using inline-block. The problem is that, when text inside one of the quadrants has more lines than the adjacent quadrant, it collapses this adjacent quadrant. I made it work with table and table-cell display properties, but I'd like to know why inline-block has this behavior.

Sample: http://sassmeister.com/gist/f645ab59f57affc1fea8

.circle-container {
  width: calc(400px + 4em);
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.circle-quad {
  display: inline-block;
  width: 200px;
  height: 200px;
  padding: 1em;
}

.circle-quad--1 {
  border-radius: 100% 0 0 0;
  background: blue;
}

.circle-quad--2 {
  border-radius: 0 100% 0 0;
  background: red;
}

.circle-quad--3 {
  border-radius: 0 0 0 100%;
  background: yellow;
}

.circle-quad--4 {
  border-radius: 0 0 100% 0;
  background: green;
}

<div class="circle-container">

  <div class="circle-quad circle-quad--1">
    <span>
      Headhunting Ativo
    </span>
  </div><!--
--><div class="circle-quad circle-quad--2">
      <span>
        Recrutamento Passivo
      </span>
  </div><!--
  --><div></div><!--
  --><div class="circle-quad circle-quad--3">
    <span>
      Fit Cultural
    </span>
  </div><!--
  --><div class="circle-quad circle-quad--4"><!--
  --><span>
      Talk Session Empresas e Jovens
    </span><!--
  --></div>
  </div>
      

Answer 1

Set vertical-align: top; to the inline blocks. Because the default value is baseline.

.circle-quad{
  ...
  vertical-align: top;
}