Align div to bottom Tailwindcss

Sander Bakker 0
Viewed 22

I'm trying to align a div to the bottom of a 'h-screen' div. I wrote the following code to do so

<div>
<div class="flex">
   <div class="bg-black h-screen p-5 pt-8 relative duration-300" :class="{ 'w-72': open, 'w-20': !open }">
      <div  @click="toggleMenu">
         <outline-arrow-left-icon v-if="open" class="w-6 h-6 bg-white text-black rounded-full absolute -right-2.5 border-black cursor-pointer" />
         <outline-arrow-right-icon v-if="!open" class="w-6 h-6 bg-white text-black rounded-full absolute -right-2.5 border-black cursor-pointer" />
      </div>
      <div class="inline-flex">
         <img src="https://via.placeholder.com/40" class="block rounded-full cursor-pointer float-left mr-2"/>
         <h2 class="transform text-white font-medium origin-left text-2xl m-auto duration-300" :class="{'scale-0': !open}">Brand</h2>
      </div>
      <div class="mt-auto flex cursor-pointer content-end align-bottom">
         <div class="text-white">
            Test
         </div>
      </div>
   </div>
   <div class="p-7 w-full">
      <Nuxt/>
   </div>
</div>

I've tried it with classes like content-end align-bottom and mt-auto but I fail to push it to the bottom.

tailwind-css css html
1 Answers

You want to add h-screen so it can fill the available space then use items-end or (align-items: flex-end;) to align it at the bottom of the vertical axis.

<div>
<div class="flex">
   <div class="bg-black min-h-screen p-5 pt-8 relative duration-300" :class="{ 'w-72': open, 'w-20': !open }">
      <div  @click="toggleMenu">
         <outline-arrow-left-icon v-if="open" class="w-6 h-6 bg-white text-black rounded-full absolute -right-2.5 border-black cursor-pointer" />
         <outline-arrow-right-icon v-if="!open" class="w-6 h-6 bg-white text-black rounded-full absolute -right-2.5 border-black cursor-pointer" />
      </div>
      <div class="inline-flex">
         <img src="https://via.placeholder.com/40" class="block rounded-full cursor-pointer float-left mr-2"/>
         <h2 class="transform text-white font-medium origin-left text-2xl m-auto duration-300" :class="{'scale-0': !open}">Brand</h2>
      </div>
      <div class="flex items-end h-screen cursor-pointer">
         <div class="text-white">
            Test
         </div>
      </div>
   </div>
   <div class="p-7 w-full">
      <Nuxt/>
   </div>
</div>

Working example - Tailwind Play

Kameron0
Related