How to align an element to the bottom of the div with flexbox when flex-direction is set to column

Question

I know this question has been asked several times, but for some reason my isn't working. Can you guys please help me?I'm just trying to align all the buttons with all the cards because the tiles could have different lengths one, two or three lines, but I don't know why it's not working. Thanks!

    .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>

This is what I want to look like.

Answer 1

For use the justify-content: space-between; property, a height or width must be defined.

For flex-direction:column is must be defined height

  .cards {
        max-width: 1200px;
        display: flex;
    }

    .card {
        flex: 1;
        margin-right: 30px;
    }

    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      height:200px;
      
    }

    .pic {
        min-height: 20vh;
        background: blue;

    }

    <div class="cards">
        <div class="card red">
            <div class="pic">
            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait.Lorem ipsum dolor sit ait </h1>
                <button>click here</button>
            </div>
        </div>
        <div class="card blue">
            <div class="pic">

            </div>
            <div class="content">
                <h1>Lorem ipsum dolor sit ait. </h1>
                <button>click here</button>
            </div>
        </div>
    </div>