I have never remembered how to stick something to the bottom of its parent element. Just like the pinned repos on your Github profile page, how do you you keep the language of the repo fixed to the bottom?

Well below ill tell you, I am using Tailwind 3.0 here but ill place examples below in plain css too. For me when I was trying to figure it out, I knew it was about positioning with CSS but what I always forgot was the Parents height.

This needs to be 100% or in Tailwind terms h-full. You can see the main div is just an outer container with a border style, but the inner one is where I have gave a class of h-full relative to it, this gives the inner containiner (which holds everything) a height of 100% and a position of relative.

Which in terms of MDN means

"The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static."

More information here

<div id="project-outer-container" class="text-sm border-solid border border-slate-300 dark:border-slate-700 rounded shadow mb-4 md:mb-0 pb-4">
    <div id="project-inner-container" class="p-4 h-full 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 id="project-about" class="">
            <p class="">{r.node.description}</p>
        </div>
        <div id="project-lang" class="flex items-center absolute bottom-0">
            <div style={langColor} class="rounded-full h-3 w-3"></div>
            <span class="ml-3">{r.node.primaryLanguage.name}</span>
        </div>
    </div>
</div>

Now our inner container needs to be stuck to the bottom, so it doesn't float up if there is a less text within the project description. I have done this by adding a class of absolute bottom-0 which will give it a position of absolute and fix it to the bottom of it's parent.

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

That's pretty much it really, simple when you can remember it for sure. In it's simplest term the CSS would be like:

.parent {
    position: relative;
    height: 100%;   
}

.child {
    position: absolute;
    bottom: 0;
}