Create 3 price boxes with Bootstrap - css

Question

I would like to create 3 boxes with equal height using Bootstrap but I am not sure how to do it.
I found I can use flexbox and my main boxes will be equal height but I want some inner div to have border and that div to fill the main div and I cannot do it.
I have also some other problems: how to position button at the center bottom of that div and I have there also some description paragraph and I would like those paragrahps also to be equal heights, because I use some border at the bottom.
Here is my example code:
<div class="container text-center">
<div class="row">
<div class="col-md-4">
<div class="box">
<div class="box-header">
</div>
<div class="box-body">
<p class="box-info">Some description of product 1</p>
<ul class="box-list">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="btn btn-default">Register</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-header">
</div>
<div class="box-body">
<p class="box-info">Some description of product 2 which can be very loooooooooooooong</p>
<ul class="box-list">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="btn btn-default">Register</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-header">
</div>
<div class="box-body">
<p class="box-info">Some description of product 3</p>
<ul class="box-list">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="btn btn-default">Register</button>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
Css:
body {
padding-top: 50px;
}
.box-header {
height: 100px;
background-color: blue;
text-align: center;
}
.box-body {
position: relative;
padding: 20px 30px;
border: 1px solid green;
border-top: none;
}
.box-info {
border-bottom: 1px solid #e7e7e7;
}
.box-list {
text-align: left;
}
My description can not be clear, so you can find a Bootply here.