Html 如何在另一个元素中放置图标？

我有这个盒子： 使用此HTML：

<p class="box info"><span class="material-icons blue">record_voice_over</span>Sometimes minor spelling changes occur. For example, in Spanish we don't have "ss", so profe<strong>ss</strong>or becomes profe<strong>s</strong>or. Also, "th" in English becomes "t" in Spanish, as in au<strong>th</strong>or → au<strong>t</strong>or.</p>

我试图理解如何将图标作为方框的一部分放置，使其具有响应性，如下所示：

根据我的发现，我认为我需要创建一个新类，如

.icon box

，然后在HTML中执行以下操作：

<p class="box info"><i class="icon-box"><span class="material-icons blue">record_voice_over</span></i>Sometimes... </p>

有时录制语音

但我不知道需要向该类添加哪些属性，这样图标才具有响应性，我也不知道HTML在那里是如何工作的。我读过一些关于position的MDN文档，我认为是

绝对的
属性，但由于我对这些属性完全陌生，我甚至不知道要查找哪些词

非常感谢您的帮助。
您可以使用
flexbox


.box{
显示器：flex；
对齐项目：居中；
背景：#deeefe；
填充：1rem；
边界半径：4px；
字体系列：无衬线；
颜色：#004bad；
}
.方框p{
左边距：1 em；
线高：1.4；
弹性：1；
}
.box.材质图标{
字体大小：40px；
}

录下你的声音Lorem ipsum door sit amet，继续与精英们告别。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。使用flexbox：只需将文本包装在.box中的div或p标记中即可。不管发生什么，它都会做出反应


.box{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
背景:#ECFFE2；
填充：2rem；
}
.箱跨{
右边距：1rem；
宽度：20%；
}
.包厢部{
柔性生长：1；
}

把声音录下来
有时。。。
由于某些原因，您在框中有一个额外的
标签（一个空标签）。如果您创建了一个换行符来在文本上方增加额外的空间，那么它可能会被添加。如果是这种情况，您可以选择
.box.info p
并将
页边空白顶部添加到它。是的，我现在看到控制台中有一个额外的标记，没有换行符，删除我有的换行符没有帮助。我不想在上面留下任何空白，它在Codepen上的显示方式非常完美，不确定WordPress在那里做什么。尝试使用
div
元素而不是
p
，看看会发生什么，你还需要更新
CSS
。嗯。。。如果我删除了
record\u voice\u over
部分，文本将正确显示。那是什么意思？不用担心，非常感谢，谢谢你抽出时间。“谢谢！
<p class="box info"><i class="icon-box"><span class="material-icons blue">record_voice_over</span></i>Sometimes... </p>