一个标签内有两个子标签，给一个子标签使用text-overflow设置溢出隐藏后，两个子标签文字不会对齐，为什么？

   <p class="test">
     <span class="left">我是一段段小小小文字</span>    
     <span class="right">恩。。啊。。 哈哈。。 </span>
   </p>

   p{
     width: 300px;
     margin: 0 auto;
   }
   span{
     display: inline-block;
   }
   .left{
     width: 40%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }

然后显示效果就是这样

我想到应该是.left的overflow属性触发了BFC，而.right并没有，所以对.right设置了浮动或者overflow，这样就能对齐。
但是我在MDN上看到inline-block也会触发元素的BFC，那么我已经对两个元素设置了inline-block了，这样两个元素 应该已经触发了BFC了哒，那为什么还需要对另外一个元素设置overflow或者浮动，才能够对齐呢？