HTML元素中的行级与块级元素不能放在一行。

最近在工作中忽然发现了一个小问题，本来以为自己html标签学的挺好，今天终于明白，一直都是个菜鸟。
背景：
项目使用的是ant design的Grid布局，使用Row和Col。代码如下：

<Col>
    <div style={{display: flex}}>
        <Icon type="user" style={{ fontSize: 20,color: '#67a8e4'}}/>
        <p>人数：<span style={{color: 'deepskyblue'}}>358</span>人</p>
    </div>
</Col>

想要的样子是图标居左文字居右，并且都是垂直居中，但出来的样子是这样的：

？？？
那就给div加个align-items: center;好了，然后变成了

这很明显不科学。如果去掉flex布局，图标和文字将分为上下两行
这时我们就应该注意到，图标和文字不是一样的，图标是用<i>标签配合::before伪元素实现的，经查是行级元素，而<p>是块级元素，二者是不能放在一行的。
所以只要将<p>改为行级元素<span>即可，再加上flex布局及垂直居中
正确效果是这样

或者将div直接替换为Row，不必加flex也能达到同样的效果。