3 Column (boxes) Layout

I'm trying to achieve this layout which is 3 columns with space between them, and each column has a heading and paragraph:

I've tried and this is the closest look:

How can I fix it? (especially the heading part)

This is the my html:

<div class="wrapper">
<section class="columns">
    <div class="column">
        <h2>Cupcakes</h2>
        <p>----</p>
    </div>

    <div class="column">
        <h2>Join our team</h2>
        <p>-----p>
    </div>

  <div class="column">
        <h2>About us</h2>
        <p>---</p>
    </div>

</section>  

</div>

and this is the my css:

* { box-sizing: border-box; }

.wrapper {
    padding: 5px;
    max-width: 960px;
    width: 95%;
    margin: 20px auto;
}

.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}

.column {
    flex: 1;
    border: 1px solid gray;
    margin: 2px;
    padding: 10px;
    &:first-child { margin-left: 0; }
    &:last-child { margin-right: 0; }

}

h2 {
    padding: 0px;
    border-style: solid;
    border-width: thin;
    text-align: center;
    background-color: #e4e4e4


}

Thank you!