您是否正在寻找类似this的内容？

<div class="h-screen bg-gray-900 grid items-center justify-items-center">
  <div class="h-20 w-3/5 dark:bg-gray-500 border-2">
    <!-- adding flex here will put the items next to eachother when using 2x child divs -->
    <div class="flex">
      <div class="border-2 p-2 w-2/5 h-full flex items-center ">
        <h1 class="text-2xl text-white">Capsule # / CapName</h1>
      </div>
      <div>
        <h1 class="text-white">Hello</h1>
      </div>
    </div>
  </div>
</div>

还有几个备选的主意给你。。

<div class="flex h-screen bg-gray-900">
  <!-- flex (above) while using (m-auto) below will center your div -->
  <div class="m-auto flex w-3/5 border-2 bg-gray-500">
    <!-- removed height above so can grow as much as needed (as you're constraining the width) -->
    <!-- flex above with 2x child divs will align them side-by-side -->
    <div class="w-2/5 border-2 p-2">
      <h1 class="text-2xl text-white">Capsule # / CapName</h1>
    </div>
    <div class="p-2">
      <h1 class="text-white">Hello</h1>
    </div>
  </div>
</div>

Layout Using Grid

<div class="flex h-screen bg-gray-900">
  <!-- flex (above) while using (m-auto) below will center your div -->
  <div class="m-auto grid w-3/5 grid-cols-2 border-2 bg-gray-500">
  <!-- you could also remove the width below and use grid and grid-cols-2 above-->
    <div class="border-2 p-2">
      <h1 class="text-2xl text-white">Capsule # / CapName</h1>
    </div>
    <div class="p-2">
      <h1 class="text-white">Hello</h1>
    </div>
  </div>
</div>

this布局是你想要的吗？
您需要将flex属性包含到包含其他2个子div的父div中，如下面的注解所示

您的代码

<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> <!--this is parent div -->

             <!-- child1 -->
            <div className='border-2 p-2 w-2/5 h-full flex items-center '>
              <h1 className='text-2xl text-white'>Capsule # / CapName</h1>
            </div>

            <!-- child2 -->
            <div>
              <h1 className='text-white'>Hello</h1>
            </div>
          </div>
        </div>
      </div>

更正编码

<div class="grid h-screen items-center justify-items-center dark:bg-gray-900">
  <div class="w-3/5 border-2 dark:bg-gray-500">
    <div class="flex items-center space-x-1">
      <div class="h-full w-3/5 border-2 p-2">
        <h1 class="text-2xl text-white">Capsule # / CapName</h1>
      </div>
      <div>
        <h1 class="text-white">Hello</h1>
      </div>
    </div>
  </div>
</div>

见现场代码here