Inline-block with paragraph keeps jumping - html

Question

I am trying to make 3 boxes next to each other with text in. So far I got the boxes setup right. But when I add text it jumps up and down. When I enter the same amount of paragraph tags in a div they all align. But when one div has 1 paragraph tag and the others have 2 they aren't aligned anymore.
I'm not sure how to solve this.
JSFIDDLE: https://jsfiddle.net/gegc8nuk/
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
.wrap {
display: table;
/* Webkit Fix */
width: 100%;
/* set width to stop display table shrink to fit */
word-spacing: -1em;
/* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
display: inline-block;
height: 200px;
width: 100%;
word-spacing: 0;
color: #fff;
padding: 5%;
/* reset parent */
}
.red {
background-color: #9a0000;
}
.green {
background-color: #4ce215;
}
.blue {
background-color: #240fc3;
}
<section>
<div class="row">
<div class="wrap">
<div class="tox red span-1-of-3">
<p>Hello</p>
</div>
<div class="tox green span-1-of-3">
<p>Hello</p>
</div>
<div class="tox blue span-1-of-3">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
</div>
</div>
</section>

Answer 1

If you use once display:table; why don't you use table-cells on childs ?
https://jsfiddle.net/gegc8nuk/1/
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
/*padding: 80px 0;*/
}
.wrap {
display: table;
width: 100%;
/* set width to stop display table shrink to fit
word-spacing: -1em;
hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
display: table-cell;
/* height: 200px; */
/*width: 100%;
word-spacing: 0;*/
color: #fff;
padding: 5%;
/* reset parent */
}
.red {
background-color: #9a0000;
}
.green {
background-color: #4ce215;
}
.blue {
background-color: #240fc3;
}
<section>
<div class="row">
<div class="wrap">
<div class="tox red span-1-of-3">
<p>Hello</p>
</div>
<div class="tox green span-1-of-3">
<p>Hello</p>
</div>
<div class="tox blue span-1-of-3">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
</div>
</div>
</section>

Answer 2

With your css you have set tox with 100% width while keeping inline-block, while applied wrap as display: table; . Both are different. You can do the following:
Edit your CSS:
.wrap {
display: block;
/* Webkit Fix */
width: 100%;
/* set width to stop display table shrink to fit */
word-spacing: -1em;
/* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.tox {
display: inline-block;
height: 200px;
width: 33.333%;
padding: 10px;
word-spacing: 0;
color: #fff;
vertical-align: top;
box-sizing: border-box;
/* reset parent */
}
Fiddle: https://jsfiddle.net/debraj/gegc8nuk/2/