As the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different image sizes uploaded to each column. I do not want to resize the images. I have circled in red the divs I want aligning at the bottom. Github Repo

I have tried the different settings referenced here

The specific child div that I would like aligned is from <div className="p-4 bg-black">

I was wondering if anyone could assist?

return (
<div className="flex justify-end">
  <div className="px-4" style={{ maxWidth: '1600px' }}>
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
      {
        nfts.map((nft, i) => (
          <div key={i} className="border shadow rounded-xl overflow-hidden">
            <img src={nft.image} />
            <div className="p-4">
              <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
            <div style={{ height: '70px', overflow: 'hidden' }}>
              <p className="text-gray-400">{nft.description}</p>
              </div>
            </div>
            <div className="p-4 bg-black">
              <p className="text-2xl mb-4 font-bold text-white">{nft.price} Matic</p>
              <button className="w-full bg-pink-500 text-white font-bold py-2 px-12 rounded"
              onClick={() => buyNft(nft)}>Buy</button>
              </div>
          </div>
        ))
      }
    </div>
  </div>
</div>

) }

As the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different image sizes uploaded to each column. I do not want to resize the images. I have circled in red the divs I want aligning at the bottom. Github Repo

I have tried the different settings referenced here

The specific child div that I would like aligned is from <div className="p-4 bg-black">

I was wondering if anyone could assist?

return (
<div className="flex justify-end">
  <div className="px-4" style={{ maxWidth: '1600px' }}>
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
      {
        nfts.map((nft, i) => (
          <div key={i} className="border shadow rounded-xl overflow-hidden">
            <img src={nft.image} />
            <div className="p-4">
              <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
            <div style={{ height: '70px', overflow: 'hidden' }}>
              <p className="text-gray-400">{nft.description}</p>
              </div>
            </div>
            <div className="p-4 bg-black">
              <p className="text-2xl mb-4 font-bold text-white">{nft.price} Matic</p>
              <button className="w-full bg-pink-500 text-white font-bold py-2 px-12 rounded"
              onClick={() => buyNft(nft)}>Buy</button>
              </div>
          </div>
        ))
      }
    </div>
  </div>
</div>

) }

• javascript
• css
• next.js
• multiple-columns
• tailwind-css

• Try to set fixed min-height to a root div of an every card and use content-between – coder Commented Feb 10, 2022 at 23:13
• Because of the fixed height there will be the same vertical padding for all cards. content-between will position the elements inside each card at the vertical edges – coder Commented Feb 10, 2022 at 23:22

2 Answers 2

You can wrap your top content in an element and apply CSS flexbox to the parent element.

flex - applies CSS flexbox

flex-col applies CSS flex-direction: column which stacks the child elements vertically

justify-between applies CSS justify-content: space-between, which tells the element to distribute children evenly. The first and last child elements will be at the furthest ends of the parent element (beginning and end). Since the element has flex-col, the ends will be the top and bottom of the element.

flex-1 applies CSS flex: 1, which makes all the child elements fill to the parent's size; in this case, it will make the children all the same height.

Align details and images to the top and the buying info to the bottom

<div className="flex flex-1 flex-col justify-between">
 <div>//must wrap content to be aligned to top
  <img src={image} />
  <p>{nft.name}<p>
  <p>{description}</p>
 </div>
 <div>//must wrap content to be aligned to bottom
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>

Additional example - this will have all of the images at the top and all of the content at the bottom

<div className="flex flex-1 flex-col justify-between">
 <img src={image} /> // aligned top
 <div>// aligned bottom
  <p>{name}<p>
  <p>{description}</p>
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>

I am using tailwind CSS with react. It might help you.

First Code: Firstly iterating to the fetch data from the useEffect section with tailwind CSS grid concepts. I am using 3 cols for large devices, 2 cols for medium devices, and 1 col for small devices.

import React, { useEffect, useState } from 'react';
import SellingCard from '../SellingCard/SellingCard';

const BestSelling = () => {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        fetch('data.json')
            .then((res) => res.json())
            .then((data) => setProducts(data));
    }, []);
    return (
        <div
            style={{ maxWidth: '1300px' }}
            className="my-10 md:my-20 mx-auto container px-4"
        >
            <h4 className="text-center text-lg font-normal text-red-500 my-2">
                CHECK IT OUT
            </h4>
            <h1 className="text-center text-4xl md:text-5xl font-mono tracking-wide font-bold">
                Best Sellers
            </h1>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {products.slice(0, 6).map((product) => (
                    <SellingCard key={product.id} product={product} />
                ))}
            </div>
        </div>
    );
};

export default BestSelling;

Second Code: I just give a fixed height ["style={{ height: '500px' }}"] of the card and make the display property "relative" of the card main div. Then I added display "absolute" and "bottom-0" for the div a which I just want to fix at the bottom of the card.

import React from 'react';

const SellingCard = (props) => {
    const { img, name, price, quantity, sup_name, des } = props.product;
    return (
        <>
            <div>
                <div
                    style={{ height: '500px' }}
                    className="rounded relative shadow-sm"
                >
                    <img
                        className="h-60 rounded w-full object-cover object-center mb-6"
                        src="https://dummyimage./722x402"
                        alt="content"
                    />
                    <h3 className="tracking-widest text-red-500 text-xs font-medium title-font">
                        Suplier: {sup_name}
                    </h3>
                    <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
                        {name}
                    </h2>
                    <p className="leading-relaxed text-base mb-2 flex-1">
                        {des.slice(0, 150)}
                    </p>
                    <div className="absolute bottom-0 w-full">
                        <div className="flex justify-between items-center relative bottom-0 text-red-600 text-lg font-bold mb-2">
                            <p>Price: {price}</p>
                            <p>Items Left: {quantity}</p>
                        </div>
                        <button className="w-full text-center bg-blue-600 py-2 rounded text-white font-bold hover:bg-blue-800">
                            Update This Product
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};

export default SellingCard;