如何使用Tailwind CSS实现文本居左、图标居右上角同行布局

外层容器设置了flex布局默认横向排列，直接把图标放在所有文本元素前面，没有做内容分组，也没配置flex对齐规则，导致图标和文本元素横向挤在容器开头，排版错位。

• 把所有文本内容用单独的div包裹，作为独立的左对齐内容块
• 给外层flex容器添加justify-between属性，让文本块和图标分别靠容器左右两侧排布；添加items-start属性，让图标对齐容器顶部
• 给图标添加上边距，和标题顶部位置对齐
• 删掉文本元素上多余的重复text-left属性（块级元素默认就是左对齐，不需要额外声明）

<!-- Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<!-- 卡片组件 -->
<div class="flex card bg-neutral h-48 px-3 hover:bg-primary justify-between items-start">
  <!-- 左侧文本区域 -->
  <div>
    <h2 class="text-2xl font-bold text-white py-3">Project name</h2>
    <p class="py-4 font-bold group-hover:bg-primary">Explaination of the project</p>
    <p class="pb-4 font-bold">Tag, tag, tag</p>
  </div>
  <!-- 右上角跳转图标 -->
  <svg class="h-6 w-6 mt-3 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
  </svg>
</div>

• 所有文本保持左对齐，垂直排版顺序和预期一致
• 图标固定在卡片右上角，和标题顶部对齐，不会出现在文本上方
• 完全保留原有卡片的高度、内边距、hover变色等交互样式

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