why isnt initial value working as I'm expecting it to, what am I not understanding?

Question

According to mdn display: initial; sets a property back to its default value, but as I'm trying to use I'm noticing its not working as I'm expecting, for example I have a two divs below with a display set to inline-block. divs by default are block level elements, so its default value is block. However if I set one to initial it simply disappears, if I set it to block its works as expected. What I am I not understanding "default value" means it's original user agent browser defined value... right or no? If not what is the "default value" defined as?

https://jsfiddle.net/2qv5aa5s/7/

<div class="one">
</div>
<div class="two">
</div>

div{
  width: 100px;
  height: 100px;
  margin: 1px;
   display: inline-block;
}
.one{
  background-color: blue;

}
.two{
  background-color: red;
  display: initial;
}