3 Box grid not equal width as they change depending on text

I have a small bit of HTML in a word press post body which I have (want) 3 equal width boxes, except the third box is smaller if i have less text (or more in another box) and i cant figure out how to keep the sizes static.

I have tried adding CSS containers, adding physical widths but nothing changes.

Current Code:

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEADERTEXT</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

How it looks:

With differing amounts of text:

<div>
<div class="page-content">
<div class="grid grid--thirds">
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B1HEADERTEXT</h5>
<p>B1BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B2HEADERTEXT</h5>
<p>B2BODYTEXT</p>
</div>
</a>
</div>
<div class="grid__item" data-match-height="login-block-container" display:block width: 33%;>
<a class="login_link" href="https://www.google.com">
<div class="login-block">
<h5 class="login-block__title">B3HEAD</h5>
<p>B3BPDYTEXT</p>
</div>
</a>
</div>
</div>
</div>
</div>

How that looks:

Solution

Judging by the image you've posted, it seems as if the parent or parent container is behaving like a flex or grid or something similar.

If you don't want the content of each box to effect the width of any box, you can do this by applying the following code to each box.

.box {
  width: calc(100% / 3);
  word-wrap: break-word;
}