Html 如果文本不在范围内，请将其换行

我有一个面板，分为两部分：左面板和右面板。 在右面板中，我有一个未排序的元素列表，它确实有元素列表。 每个li都有两个跨度的标签，一个用于并排显示图标文件和文本内容

当前：当文本长度增加时，整个跨度移动到新行。跨度不再并排

我需要实现，span1和span2应该并排，当文本在span2中增加时，span 2应该垂直增长，而不是完全移动到新行

。左侧面板{
浮动：左；
宽度：50%；
右侧填充：1.25rem；
}
.右侧面板{
浮动：对；
宽度：20%；
左侧填充：1.25rem；
}
.面板信息内容{
保证金底部：3.75雷姆；
}
.用户指南{
列表样式：无；
}
李先生{
边框：5px纯黄色；
显示：块；
最小高度：1.75雷姆；
保证金底部：0.625雷姆；
}
a{
光标：指针；
颜色：#ffff；
文字装饰：无；
}
.guide_图标--文件{
边框：2倍纯绿；
显示：内联块；
垂直对齐：中间对齐；
保证金权利：0.625雷姆；
宽度：1.75雷姆；
高度：1.75雷姆；
背景重复：无重复；
}
.指南\入口详细信息{
显示：内联块；
垂直对齐：中间对齐；
颜色：红色；
边框：2件纯蓝；
}

Flexbox可以做到：

。左侧面板{
浮动：左；
宽度：50%；
右侧填充：1.25rem；
}
.右侧面板{
浮动：对；
宽度：50%；/*用于演示*/
左侧填充：1.25rem；
}
.面板信息内容{
保证金底部：3.75雷姆；
}
.用户指南{
列表样式：无；
}
李先生{
边框：5px纯黄色；
显示：块；
最小高度：1.75雷姆；
保证金底部：0.625雷姆；
}
a{
显示：flex；/*此*/
光标：指针；
文字装饰：无；
}
.guide_图标--文件{
边框：2倍纯绿；
显示：内联块；
垂直对齐：中间对齐；
保证金权利：0.625雷姆；
宽度：1.75雷姆；
高度：1.75雷姆；
背景重复：无重复；
}
.指南\入口详细信息{
显示：内联块；
垂直对齐：中间对齐；
颜色：红色；
边框：2件纯蓝；
}

我现在就试试