How to make all the size of the card component in Daisy UI vertically equal to the one beside it

Question

I am using the daisy UI with astro static site generator for creating a blog, the card component of daisy UI is used and the problem is cards adjacent to each other get different size based on the content length in each card, is there a way I can stretch adjacent card with lesser content grow to the height of the largest content card in the same row so that the UI looks consistent and of same size.

Below is the card component code I am using.

 <article class="m-2">
        <div class="card card-bordered w-96 bg-base-100 border-yellow-600">
          <figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split(" ").splice(0,4).join(" ")}/></figure>
          <div class="card-body">
            <h1 class="card-title">{post.frontmatter.title}</h1>
            <p>{post.frontmatter.description.split(" ").splice(0,4).join(" ")}</p>
            <div class="card-actions justify-end">
              <a href={post.url}><button class="btn btn-primary">Read More....</button></a>
            </div>
          </div>
        </div>
      </article>

I would expect that the height of the adjacent card is same and the maximum height is decided by the largest content card in the row.

Answer 1

Here's a minimal example - it doesn't include any of your styles from Daisy UI, but it shows the effect of using display: flex on the containing article element.

The shorter card will match the size of other cards in the same row.

.m-2 {
  display: flex;
}

.m-2 .card {
  border: 1px solid aqua;
}

<article class="m-2">
  <div class="card card-bordered w-96 bg-base-100 border-yellow-600">
    <figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split( " ").splice(0,4).join( " ")}/></figure>
    <div class="card-body">
      <h1 class="card-title">{post.frontmatter.title}</h1>
      <p>A longer card.</p>
      <p>A longer card.</p>
      <p>A longer card.</p>
      <p>A longer card.</p>
      <div class="card-actions justify-end">
        <a href={post.url}><button class="btn btn-primary">Read More....</button></a>
      </div>
    </div>
  </div>
  <div class="card card-bordered w-96 bg-base-100 border-yellow-600">
    <figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split( " ").splice(0,4).join( " ")}/></figure>
    <div class="card-body">
      <h1 class="card-title">{post.frontmatter.title}</h1>
      <p>A shorter card.</p>
      <div class="card-actions justify-end">
        <a href={post.url}><button class="btn btn-primary">Read More....</button></a>
      </div>
    </div>
  </div>
</article>