vertical-align是同级之间的。你可以这样写

<p style="display:inline-block;height:100px;">
    <span style="display:inline-block;height:100px;vertical-align:bottom;"></span>
    <span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
</p>

你也可以采用padding-top:80px或者margin-top:80px;强行把它挤压下去

verticla-align是参考相邻的兄弟节点的，你可以试下新弹性盒子

display: -webkit-box;
-webkit-box-align: end;

(注意兼容)

要说的 上面的诸位已经说了 还有就是vertical-align只对dispaly: inline和display: inline-block有效

这个是没法实现的用vertical-align:bottom，就你现在的结构来说。
<p style="display:inline-block;height:100px;vertical-align:bottom;">
</p>
<span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
p和span同级。

------------给他们的父DOM设置vertical-align:bottom;。你试试这样的

<p style="display:inline-block;height:100px;vertical-align:bottom;">
<span style="display:inline-block;height:20px;vertical-align:bottom;">文字</span>
</p>
这种的。你给其中的span设置absolute，bottom：0;left:0;p设置relative