How to align box items so buttons

Question

I want to align the buttons but the 2 line text makes it different than the 1 line text. Can anyone help me?

Answer 1

You can achieve this if you set display: flex on your cards and then add the magic margin-top: auto to your button.

I recreated your Code:

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4em;
  width: 100%;
}

article{
  display: flex;
  flex-direction: column;
  background: lightgray;
  padding: 1em;
  min-width: 200px;
  max-width: 200px;
}
button{
  margin-top: auto; /* the magic */
}

 <div class="container">
    <article>
      <h2>title title title title title title title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
   <article>
      <h2>title</h2>
      <button>Button</button>
   </article>
</div>

Answer 2

maybe using flex-box and set flex-end style to your button and flex-start to your text will help you.