Como forçar o conteúdo de uma div a ficar em uma linha?

Eu tenho um aplicativo Vite/Vue estilizado com Tailwind CSS. Não consigo entender por que o conteúdo de vários gerados automaticamente <div>é agrupado em vez de estar em uma linha.

Tentei reproduzir isso do zero, mas tudo o que tentei se comportou conforme o esperado.

Finalmente copiei o HTML gerado e o problema foi reproduzido. O código está abaixo, também disponível no Tailwind Play .

<div class="flex flex-row items-start gap-5">
  <!--v-if-->
  <div data-v-c5bff582="" class="">
    <!-- important events within 8 days -->
    <div data-v-c5bff582="" class="flex flex-auto flex-row gap-3">
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test later 1</div>
      <div data-v-c5bff582="" class="w-32 rounded-3xl bg-green-200 px-5 py-1 text-center text-2xl text-gray-400">test 2 later</div>
    </div>
  </div>
  <button class="self-end rounded-md bg-slate-500 px-5 py-2 text-4xl text-white">dump store</button>
</div>

Meu problema é com "teste mais tarde 1" e "teste 2 mais tarde". Por que eles não estão em uma linha, mas agrupados em <div>?

Eu tentei todos os tipos de combinações de classes (e para ser franco, um pouco do que eu pudesse pensar enquanto lia os documentos CSS do Tailwind), mas sem sucesso (embora eu tenha aprendido um pouco de CSS do Tailwind)