如何使文本与图标保持在同一行？

问题描述

  <div className={'bg-blue-700 flex flex-row p-5 items-center justify-between'} >
     <div>
        <IconButton className={'bg-blue-900 p-5 hover:bg-blue-900 '}>
            <Phone className={'text-white'} />
        </IconButton>
        <div className="text-white">John Doe</div>
      </div>
      <div>
          
      </div>
</div>

问题出在约翰·多伊（John Doe），要移到下一行。

这是我想要实现的外观。

先谢谢您

解决方法

删除包含图标和名称元素的div标记，使它们成为flex div的直接子代。现在，只有包装器div之间的内容才是flex项目，其子项将不受其祖父母元素的flex设置的影响。