使用Tailwind时CSS Grid与Flexbox布局问题：调整文本位置

问题核心是当前包裹Capsule # / CapName和Hello的父容器为默认块级布局，导致两个子元素垂直排列。要让它们横向并排且不溢出外层容器，可通过以下两种方案修改：

方案一：给父容器添加Flex布局 #

给包含两个子div的外层容器添加flex类，让子元素横向排列，同时调整对齐方式确保内容在容器内：

<div className='h-screen dark:bg-gray-900 grid items-center justify-items-center'>
  <div className='h-20 w-3/5 dark:bg-gray-500 border-2'>
    <!-- 给父div添加flex类，确保子元素横向排列且垂直居中 -->
    <div className='flex items-center h-full'>
      <div className='border-2 p-2 w-2/5 h-full flex items-center'>
        <h1 className='text-2xl text-white'>Capsule # / CapName</h1>
      </div>
      <div className='ml-4'> <!-- 可选：添加间距控制左右元素距离 -->
        <h1 className='text-white'>Hello</h1>
      </div>
    </div>
  </div>
</div>

关键修改说明： #

• 父容器添加flex items-center h-full，让子元素横向排列且垂直居中，同时占满外层容器高度，避免内容错位。
• 给Hello所在div添加ml-4（或其他Tailwind间距类），灵活控制与左侧元素的间距。
• 调整后两个元素会横向并排，且不会超出外层大div的范围。

方案二：将Hello整合到CapName的容器旁（简化结构） #

如果不需要单独div包裹Hello，可直接将其放到左侧容器的同级位置，进一步简化结构：

<div className='h-screen dark:bg-gray-900 grid items-center justify-items-center'>
  <div className='h-20 w-3/5 dark:bg-gray-500 border-2'>
    <div className='h-full flex items-center'>
      <div className='border-2 p-2 w-2/5 h-full flex items-center'>
        <h1 className='text-2xl text-white'>Capsule # / CapName</h1>
      </div>
      <h1 className='text-white ml-4'>Hello</h1>
    </div>
  </div>
</div>

以上两种方案都能实现Hello显示在CapName边框旁的需求，同时保证内容不会溢出外层容器。

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