mi componente

 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> );

Quiero mantener esta sección...

 <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>

en la parte inferior de su padre siempre. De lo contrario, termino con cosas como esta:

que simplemente se ve desordenado. He probado múltiples alineaciones de flexbox y fallos justificados. He establecido el elemento principal en absoluto y el elemento secundario en un relativo todavía nada.

Incluso probé la forma de usar un pie de página adhesivo, pero no.

Cualquier asistente de CSS que me mueva en la dirección correcta sería genial