How to align elements in three columns, even when resizing

Issue

Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.

Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?

HTML:

<section class="sub-offer">
      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
            rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
            quis!
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>

      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
            perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
            incidunt odio?
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>

      <div class="offer-container">
        <div class="offer-up">
          <h2>Lorem, ipsum.</h2>
          <img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
        </div>
        <div class="offer-down">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
            vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
            ullam quod porro atque error?
          </p>
        </div>
        <div class="more-btn">
          <a href="#">Lorem, ipsum.</a>
        </div>
      </div>
    </section>

CSS:

.sub-offer {
  text-align: center;
  display: flex;
  position: relative;

  .offer-container {
    background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
  }

  h2 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.3em;
    width: 33%;
    text-align: center;
  }

  p {
    font-size: 12px;
    margin-top: 2em;
    padding: 0 0.5em 0 0.5em;
    font-family: 'Montserrat', sans-serif;
  }

  a {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: white;
    margin: 3em 0 2.5em 0;
    padding: 0.5em;
    text-decoration: none;
    color: black;

    &:hover {
      background: #e5e5e5;
    }
  }
}

How they look now:

Solution

I solved my issue. To give all three columns the same width I've used what @tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }

To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:

.more-btn {
    display: flex;
    align-self: center;
    margin-top: auto;
  }

Answered By - Karina