两个span在一行却高低不一致

给第一个span加了超出部分呢省略号以后，两个span虽然还在一个div中，但是居然不同高了！！一个靠上一个靠下一些，我试了各种css居中的方式也没能让两个span同高；
研究了很久发现是overflow：hidden以及不折行影响的，最后解决办法是使用flex布局，两个span就恢复正常了，万能的flex啊！！！

.textTop{
    width: 100%;
    display: flex;
}

.orderName{
    display:inline-block;
    flex: 0.7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orderPrice{
    flex: 0.3;
    display: inline-block;
    padding-left: 1rem;
}