How to get 2 divs next to each other in responsive view in tailwind using grid

I have this markup and just want to get these two divs to sit next to each other in a responsive view. Not sure what i am missing here. Trying to stick to grid as the parent top is controlling the columns. So on small screen put them next to each other, on md screen and above, keep as is. There are 3 columns of these but i only included one for brevity.

Here's the tailwind play https://play.tailwindcss.com/VoNukJ0D7h

and my code

  <div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
      <div>
        <span class=" font-bold">Some text that goes here </span>
          <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
            </span>
          </p>
        </div>
        <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
          <p>
            <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
              PH%
            </span>
            <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
            Text Here
          </span>
          </p>
        </div>
      </div>

Thanks!

Solution

You could consider wrapping the elements in a horizontal flex layout like:

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

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="flex">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>

Or using a 2-column grid layout like:

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

<div class="mt-1 grid grid-cols-1 font-sm gap-[0.625rem] md:grid-cols-3 md:gap-x-0.75">
  <div>
    <span class=" font-bold">Some text that goes here </span>
    <div class="grid grid-cols-2">
      <div class="mt-1 bg-[#f4f4f4] border border-gray-detailBorder py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
          </span>
        </p>
      </div>
      <div class="bg-[#f4f4f4] border border-gray-detailBorder border-t-0 py-1.25 px-0.75 items-center text-center w-1/2 md:w-full">
        <p>
          <span class="block font-semibold text-[1.75rem] leading-9 text-blue" id="costs-students-awarded-grants-percent">
            PH%
          </span>
          <span class="mt-0.5 block font-medium text-sm leading-[1.125rem]">
          Text Here
        </span>
      </p>
    </div>
  </div>
</div>