如何使用TailwindCSS将按钮与文本末尾对齐？

要实现标题和按钮在同一水平线上且按钮靠右，你需要把标题和按钮放在同一个flex容器里，而不是分开的两个div。同时可以通过内边距类给文本添加留白，具体修改如下：

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="container grid grid-cols-2 gap-32 h-screen">
    <div class="border-solid border-red-600 border-2 p-4"> <!-- 给外层容器加内边距，控制整体留白 -->
      <div class="flex items-center justify-between"> <!-- 核心flex布局：横向排列+垂直居中+两端对齐 -->
        <h1 class="font-['Poppins'] font-bold text-5xl leading-snug border-2 border-solid">
          Applying for an internship has never been easier!
        </h1>
        <a class="btnn py-2 px-4 rounded-md bg-blue-500 text-white" href="/blog"> <!-- 加背景色让按钮更醒目 -->
          Get Started!
        </a>
      </div>
    </div>
    <div class="border-2 border-solid border-red-500 grid grid-cols-2 gap-4">
    </div>
  </div>
</body>
</html>

关键修改说明： #

• 将标题和按钮放入同一个flex items-center justify-between容器：flex实现横向排列，items-center保证两者垂直居中对齐，justify-between直接让标题靠左、按钮靠右，完美匹配需求。
• 给外层红色边框容器添加p-4（可根据需求调整数值），解决文本无内边距的问题。
• 移除标题上多余的inline-block、ml-0、pr-0类，简化代码结构。

如果不想用justify-between，也可以给按钮添加ml-auto强制靠右，容器只保留flex items-center即可，效果一致：

<div class="flex items-center">
  <h1 class="font-['Poppins'] font-bold text-5xl leading-snug border-2 border-solid">
    Applying for an internship has never been easier!
  </h1>
  <a class="btnn py-2 px-4 rounded-md bg-blue-500 text-white ml-auto" href="/blog">
    Get Started!
  </a>
</div>

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