Flexbox for equal height columns

Flexbox for equal height columns

by Nirvanachain

HTML

<div class="plans">
    <div>
        <h2>Basic</h2>  
        <h4>$10 per year</h4>
        <p>Monthly selections</p>
        <p>Up to 2 URLs</p>
        <p class="stretch">A little more text.</p>
        <a class="btn btn-large btn-primary disabled">Start Now</a>
    </div>
    <div>
        <h2>Support</h2>
        <h4>$5 per year</h4>
        <p>Daily selections</p>
        <p>Up to 50 URLs</p>
        <p class="stretch">A little more text. A little more text. A little more text.</p>
        <a class="btn btn-large btn-success disabled">Start Now</a>
    </div>
    <div>
        <h2>Creative</h2>  
        <h4>$100 per year</h4>
        <p>Yearly selections</p>
        <p>Up to 200 URLs</p>
        <p class="stretch">A little more text. A little more text. A little more text. A little more text.</p>
        <a class="btn btn-large btn-primary disabled">Start Now</a>
    </div>
</div>

CSS

body {
    padding: 1em;
}

* {
    box-sizing: border-box;
}
.plans {
    display: flex;
}

.plans > div {
    width: 33%;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

h2 {
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
}

h4 {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    margin: 0 0 10px 0;
}

.stretch {
    width: 100%;
    margin-bottom: 1em;
}

.btn {
    
}

.btn-primary {
    background-color: #2a9fd6;
    border-color: #2a9fd6;  
    color: #FFFFFF;
}

.plans > div > a {
    margin-top: auto;
}

JavaScript

// Useful Article: 
// http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/