Trying to space 2 divs between each other at the bottom

user_3412618 0
Viewed 29

I am trying to make the following happen:

  • On image hover, at the bottom it will show comments/reactions on the left and name on the right

I cannot get the 2 divs to space between at the bottom and I do not know why.

https://play.tailwindcss.com/jyBq62Ok90 is the working code

tailwind-css
2 Answers

You need to set a width, e.g. w-full on the absolute positioned div. Otherwise the div will be as wide as the content and there will be no space between.

See this tailwind play

Hope this helps.

user_174388900

As far as I understood , you need to highlight the comment div below as you hover the image with a space between two divs

You can use group-hover utility with a div wrapper. Below code will help you much more

<script src="https://cdn.tailwindcss.com"></script>
<div class="group">
  <div class="group mb-4 flex aspect-auto w-full overflow-visible duration-300 ease-in hover:scale-105 hover:rounded-lg">
    <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60" class="h-full w-full bg-gray-900 object-cover hover:opacity-40" />
  </div>
  <div class="bottom-0 mx-4 mb-4 hidden bg-gray-700 px-3 duration-300 group-hover:block group-hover:transition group-hover:ease-in">
    <div class="flex justify-between">
      <div class="flex text-sm font-medium text-white">
        <ChatAlt2Icon class="h-5 w-5 text-white" />
        <span class="pl-1 text-white">12</span>
        <HeartIcon class="ml-2 h-5 w-5 text-white" />
        <span class="pl-1 text-white">12</span>
      </div>
      <div class="flex text-white">Added: Today</div>
    </div>
  </div>
</div>

user_109623640
Related