如何调整span元素宽度匹配文本，实现旁侧图片正确布局？

我有一个如图所示的span元素，当文本一行放不下时会自动换行，带有植物的图片需要紧贴在span元素右侧：

尝试用width:fit-content时效果不符合预期，用width:min-content又会强制文本换行，都不是想要的结果。这是一个菜单项，旁边还有多个同类菜单项，单个菜单项代码如下：

<div class="flex w-max">
    <span class="py-3 pl-4 hover:bg-black/20 text-start flex items-end ">
      {{__('navbar.events')}}
    </span>
    <img class="min-w-10 w-10" src="{{asset('assets/images/vertical_divider.jpg')}}">
</div>

可以通过以下Tailwind CSS调整实现需求：

• 给span元素添加flex-1类：让span既能占据父容器剩余空间，在宽度足够时保持文本不换行，空间不足时自动换行。
• 给图片添加shrink-0类：确保图片不会被压缩，始终保持固定宽度。
• 父容器移除w-max，保留flex即可：让菜单项在空间足够时自适应内容宽度，空间不足时自动收缩，不影响其他同类菜单项布局。

调整后的代码：

<div class="flex">
    <span class="py-3 pl-4 hover:bg-black/20 text-start flex items-end flex-1">
      {{__('navbar.events')}}
    </span>
    <img class="min-w-10 w-10 shrink-0" src="{{asset('assets/images/vertical_divider.jpg')}}">
</div>

核心逻辑：flex-1让span具备弹性布局能力，自动适配空间；shrink-0锁定图片宽度，避免被挤压变形；父容器的flex保证多个菜单项能在同一行合理分配空间，同时单个菜单项内部的span和图片能保持预期的排列关系。

内容的提问来源于stack exchange，提问作者Telexx