JSFiddle - React, Tailwind, and code Playground

HTML

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>Klijsen, bijna 50 jaar ervaring</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

CSS

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: #ed8;
    border-bottom:1px dotted #000;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
    background: #ed8;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}