grid-cols. are not evenly spaced

I am using Tailwind and. I am trying to create a three column div. Two divs are relatively close to each other, and the last one is on the end.

Something like this

What I currently have is

            <a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
                <div class="grid grid-cols-3 gap-5 p-2 bg-gray-200 max-w-md">
                    <div class="pt-2 col-span-1">
                        <img src="../../assets/video-md.svg"  alt="tutorial" />
                    </div>
                    <div class="text-center col-span-2">
                        <span class="text-2xl pb-5"> {{ video.title }} </span>
                        <br />
                        <div class="w-15">
                            {{ video.paid ? 'Free Resource' : 'Paid Resource' }}
                        </div>
                        <div class="text-sm justify-end">
                            <span> {{ video.length }}</span>
                        </div>
                    </div>
                </div>
            </a>

I tried to use different col-span. tags with no avail.

Advice?

---- update 1 ----

I now have

From this code provided in an answer.

<div class="bg-white-200" v-for="c in courseContents">
        <div class="flex flex-col items-center gap-2" v-for="content in c.contents">
                <span class="text-black text-2xl">
                    {{ content.sectionTitle }}
                </span>
            <a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
                <div class="grid grid-cols-[max-content_1fr_max-content] gap-5 p-2 bg-gray-200 max-w-md w-full">
                    <div class="pt-2">
                        <img src="../../assets/video-md.svg" alt="tutorial" />
                    </div>
                    <div>
                        <span class="text-2xl pb-5"> {{ video.title }} </span>
                        <br />
                        {{ video.paid ? 'Free Resource' : 'Paid Resource' }}
                    </div>
                    <div class="text-sm self-end">
                        <span> {{ video.length }} </span>
                    </div>
                </div>
            </a>
        </div>
    </div>

For some reason the last col will not move to the far right.

If you want the layout represented from the image, it seems like to me a two column layout – one "static" one for the image and then another one for the text. The Free Resource and a minute text look like they occupy the same y-axis so it would seem like they would in the same row:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

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

<a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
  <div class="grid grid-cols-[max-content_1fr] gap-5 p-2 bg-gray-200 max-w-md w-full">
    <div class="pt-2">
      <img src="https://picsum.photos/48/48" alt="tutorial" />
    </div>
    <div>
      <span class="text-2xl pb-5"> {{ video.title }} </span>
      <br />
      <div class="w-15 flex justify-between items-baseline">
        <span>Free Resource</span>
        <span class="text-sm"> {{ video.length }}</span>
      </div>
    </div>
  </div>
</a>

<!-- end snippet -->

Otherwise if you did want three columns, you could separate out the {{ video.length }} from the rest of the text:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

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

<a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
  <div class="grid grid-cols-[max-content_1fr_max-content] gap-5 p-2 bg-gray-200 max-w-md w-full">
    <div class="pt-2">
      <img src="https://picsum.photos/48/48" alt="tutorial" />
    </div>
    <div>
      <span class="text-2xl pb-5"> {{ video.title }} </span>
      <br />
      Free Resource
    </div>
    <div class="text-sm self-end">
      <span> {{ video.length }}</span>
    </div>
  </div>
</a>

<!-- end snippet -->

Or have an inner grid:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
  <div class="grid grid-cols-[max-content_repeat(2,1fr)] gap-5 p-2 bg-gray-200 max-w-md w-full">
    <div class="pt-2">
      <img src="https://picsum.photos/48/48" alt="tutorial" />
    </div>
    <div class="col-span-2 grid grid-cols-[1fr_max-content]">
      <div>
        <span class="text-2xl pb-5"> {{ video.title }} </span>
        <br/>
        Free Resource
      </div>
      <div class="text-sm self-end">
        <span> {{ video.length }}</span>
      </div>
    </div>
  </div>
</a>

<!-- end snippet -->

I have noticed some mistakes in your code.

• max-w-md is causing limited width , that's why a minute text is not appearing on the right side. Remove it.
• The three columns are not centered vertically , so please add items-center in the grid grid-cols-.... div.

I have added below code after correcting some mistakes.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<div class="bg-white-200" v-for="c in courseContents">
        <div class="flex flex-col items-center gap-2" v-for="content in c.contents">
                <span class="text-black text-2xl">
                    Magnus Effect
                </span>
            <a href="https://www.google.com/" class="flex w-3/4 h-32 bg-blue-50 items-center hover:bg-blue-100" v-for="video in content.videos">
                <div class="grid grid-cols-[max-content_1fr_max-content] items-center gap-5 p-2  w-full">
                    <div class="pt-2">
                        <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png" alt="tutorial" />
                    </div>
                    <div>
                        <span class="text-2xl pb-5"> Tree </span>
                        <br />
                        Free Resource
                    </div>
                    <div class="text-sm self-end">
                        <span> 12 min </span>
                    </div>
                </div>
            </a>
            
        </div>
    </div>

<!-- end snippet -->

Also you can modify it to the example that you've shown in the question like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen bg-[#1a202c]" v-for="c in courseContents">
  <div class="flex flex-col items-center gap-2" v-for="content in c.contents">
    <span class="my-10 text-2xl text-white"> Scroll Down to see </span>
    <a href="https://www.google.com/" class="flex h-32 w-3/4 items-center rounded-lg bg-[#2d3748] hover:bg-[#2d3748]/70" v-for="video in content.videos">
      <div class="grid w-full grid-cols-[max-content_1fr_max-content] items-center gap-5 p-2 text-white">
        <div class="pt-2">
          <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png" alt="tutorial" />
        </div>
        <div>
          <span class="pb-5 text-2xl"> Tree </span>
          <br />
          <span class="text-white/75">Free Resource</span>
        </div>
        <div class="mr-4 self-end text-sm">
          <span> 12 min </span>
        </div>
      </div>
    </a>
  </div>
</div>

<!-- end snippet -->