JSFiddle - React, Tailwind, and code Playground

HTML

<section class="intro clearself">
    <ul class="three-col-row">
        <li>
             <h2>Wat?..</h2>

            <p>Praktische en juiste informatie is een belangrijke deelsleutel tot de oplossing van rugproblemen.</p> <a class="button" href="advice.html">Meer info!</a>

        </li>
        <li>
             <h2>Hoe...</h2>

            <p>Ga zo ver mogelijk in de beweging en herhaal dit regelmatig gedurende U capaciteit.</p> <a class="button" href="work-out.html">Kies je sport!</a>

        </li>
        <li>
             <h2>Doel...</h2>

            <p>Het belangrijkste aspect is echter dat U ontdekt dat U ZELF veel kan doen om uiteindelijk uw rugklacht te vermijden, meer dan U welicht denkt.</p> <a class="button" href="about.html">Meer info!</a>

        </li>
    </ul>
</section>

CSS

.clearself:before, .clearself:after {
    content:" ";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearself:after {
    clear: both;
}
.clearself {
    zoom: 1;
}
/* IE < 8 */

ul.three-col-row li {
    display: inline-block;
    width: 25%;
    margin-right:5%;
    float:left;
    text-align: center;
}
ul.three-col-row li:nth-child(4n+4) {
    margin-right:5%;
    float:left;
}
ul.three-col-row li:nth-child(3n+3) {
    margin-right: 5%;
    float: right;
}
.intro {
    margin:30px 0 0 0;
}
.intro h2 {
    margin-bottom: 15px;
}
.intro p {
    margin-bottom: 50px;
}
.intro ul.three-col-row li {
    max-height:350px;
}