title: Bootstrap 3 - columns equal height with flexbox
body: <p>I am trying to get a row with equal height columns regardless of content with the link at the bottom with all columns. Here is a <a href="https://jsbin.com/yisafit/edit?css,output" rel="nofollow noreferrer">JS BIN</a> and code is below.</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;h4 class="report_list__title"&gt;Activites&lt;/h4&gt;
      &lt;div class="row report_list"&gt;
  
          &lt;div class="col-xs-3 report_list__item"&gt;
              &lt;a href="#" class="report_list__item_heading"&gt;Activity 1&lt;/a&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
  
              &lt;a href="#" class="btn btn-primary"&gt;View&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-3 report_list__item"&gt;            
              &lt;a href="#" class="report_list__item_heading"&gt;Activity 2&lt;/a&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
  
              &lt;a href="#" class="btn btn-primary"&gt;View&lt;/a&gt;            
          &lt;/div&gt;
  
          &lt;div class="col-xs-3 report_list__item"&gt;            
              &lt;a href="#" class="report_list__item_heading"&gt;Activity 3&lt;/a&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
  
              &lt;a href="#" class="btn btn-primary"&gt;View&lt;/a&gt;            
          &lt;/div&gt;
  
          &lt;div class="col-xs-3 report_list__item"&gt;
              &lt;a href="#" class="report_list__item_heading"&gt;Activity 4&lt;/a&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
  
              &lt;a href="#" class="btn btn-primary"&gt;View&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;h4 class="report_list__title"&gt;Marketing&lt;/h4&gt;
      &lt;div class="row report_list report_list--last"&gt;
          &lt;div class="col-xs-3 report_list__item"&gt;
              &lt;a href="#" class="report_list__item_heading"&gt;Marketing 1&lt;/a&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing.&lt;/p&gt;
  
              &lt;a href="#" class="btn btn-primary"&gt;View&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  .report_list {
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
  }
  
  .report_list--last {
      border: none;
  }
  
  .report_list__title {
      margin-top: 20px;
  }
  
  .report_list__item {
      border: 1px solid green;
      display: inline-flex;
      flex-direction: column;
  }
  
  .report_list .report_list__item a {
      align-items: flex-end;
  }
  </code></pre>