JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://www.borger.dk/Style%20Library/css/bdk-app-master.css">
<h2>Vertical align &ndash; two extra inner wrappers</h2>

<ol class="indicator-horisontal indicator clearfix">
    <li class="done">
        <div class="wrapper-step">
            <div class="wrapper-step-inner">
                <div class="title-step">Stamoplysninger</div>
                <div class="description-step">Indtast dit navn, alder</div>
            </div>
        </div>
    </li>
    <li class="current">
        <div class="wrapper-step">
            <div class="wrapper-step-inner">
                <div class="title-step">Udfyld ansøgning</div>
                <div class="description-step">Udfyld felterne</div>
            </div>
        </div>
    </li>
    <li>
        <div class="wrapper-step">
            <div class="wrapper-step-inner">
                <div class="title-step">Bekræft oplysninger</div>
                <div class="description-step"></div>
            </div>
        </div>
    </li>
    <li class="final">
        <div class="wrapper-step">
            <div class="wrapper-step-inner">
                <div class="title-step">Kvittering</div>
                <div class="description-step">Print/e-mail en kvittering</div>
            </div>
        </div>
    </li>
</ol>

<h2>Full width &ndash; one extra outer wrapper</h2>

<div class="indicator-wrapper">
    <ol class="indicator-horisontal indicator clearfix full-width">
        <li class="done">
            <div class="title-step">Stamoplysninger</div>
            <div class="description-step">Indtast dit navn, alder</div>
        </li>
        <li class="current">
            <div class="title-step">Udfyld ansøgning</div>
            <div class="description-step">Udfyld felterne</div>
        </li>
        <li>
            <div class="title-step">Bekræft oplysninger</div>
            <div class="description-step"></div>
        </li>
        <li class="final">
            <div...

CSS

.wrapper-step {
    display: table;
    height: 100%;
    width: 100%;
}
.wrapper-step-inner {
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}
@media screen and (min-width: 768px) {
    .indicator-wrapper {
    
    }
    .indicator-horisontal.indicator.full-width {
        display: table;
        width: 100%; /* fallback if calc isn't supported: http://caniuse.com/#feat=calc */
        width: calc(100% + 28px);
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 7px 0;
        margin-left: -14px;
    }
    .indicator-horisontal.indicator.full-width > li {
        display: table-cell; 
        float: none;
        width: 100%;
        vertical-align: middle;
    }
}