TailwindCSS small column

Question

How can I make the second column use the minimum amount of space needed?

https://play.tailwindcss.com/tYdbqCSfoh?size=540x720

I have this:

But I want this instead:

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="relative bg-gray-600">
    <div class="max-w-full m-2">
      <div class="grid gap-2 grid-flow-col bg-blue-300">
        <div class="bg-green-200">sdf</div>
        <div class="bg-red-200">sdf</div>
      </div>
    </div>
  </div>
</div>

Answer 1

Just add grid-cols-1

<script src="https://cdn.tailwindcss.com"></script>

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="relative bg-gray-600">
    <div class="max-w-full m-2">
      <div class="grid grid-cols-1 gap-2  grid-flow-col bg-blue-300">
        <div class="bg-green-200">sdf</div>
        <div class="bg-red-200">sdf</div>
      </div>
    </div>
  </div>
</div>