I'm trying to make each element in the same row equal height. I don't want elements to be stretched though. They should also be vertically aligned within the page. I managed to get them vertically aligned on the page using `align-items:center;` However, the boxes in the same row aren't of equal heights. Any ideas what I'm doing wrong here? I don't want to use a fixed height to achieve this though.
[JS Bin](https://jsbin.com/wiroculuvu/edit?html,css,output)

I'm looking to achieve this;[![enter image description here](https://i.stack.imgur.com/poixK.png)](https://i.stack.imgur.com/poixK.png) 

Many thanks. 

```css
body {
  background: lightblue;
  padding: 1rem;
}

.help-boxes {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.box-wrap {
  height: 92vh;
}

.help-box-link {
  background: #fff;
  -webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>
```