My Component

return (
    <div>
      <section>
        <div class="md:grid md:grid-cols-2 gap-4">
          {pinnedRepos.map((r) => {
            const bgColor = {
              backgroundColor: r.node.primaryLanguage.color,
            };

            return (
              <div
                id="project-outer-container"
                class="text-sm border-solid border border-gray-300 rounded shadow mb-4 md:mb-0 pb-4">
                <div id="project-inner-container" class="p-4 relative">
                  <div id="project-title" class="flex items-center">
                    <span class="mr-3 text-xl">
                      <GoRepo />
                    </span>
                    <a href={r.node.url}>{r.node.name}</a>
                  </div>
                  <div class="flex flex-col justify-between">
                    <div id="project-about" class="">
                      <p class="">{r.node.description}</p>
                    </div>
                    <div id="project-lang" class="flex items-center content-end">
                      <div style={bgColor} class="rounded-full h-3 w-3"></div>
                      <span class="ml-3">{r.node.primaryLanguage.name}</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );

I want to keep this section...

<div id="project-lang" class="flex items-center content-end">
                      <div style={bgColor} class="rounded-full h-3 w-3"></div>
                      <span class="ml-3">{r.node.primaryLanguage.name}</span>
                    </div>

at the bottom of its parent always. Otherwise I end up with stuff like this:

which just looks messy. I have tried multiple flexbox alignments and justified rulings. I have set the parent element to absolute and the child to a relative still nothing.

I have even tried the way of using a sticky footer but nope.

Any CSS wizards to move me in the right direction would be great