JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left__cover"></div>
<div class="right__cover"></div>
<div class="centered--element">
    <div class="center--line"></div>
    <h1>This is a example here</h1>
</div>

SCSS

.centered--element{
    background: #f2f2f2;
    text-align: center;
    text-transform: uppercase;
}

/* problem property.. */
h1{ letter-spacing: 20px }

.center--line{
    width: 1px;
    background: Tomato;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    height: 100%;
}

.left__cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 100%;
    background: Tomato;
    text-align: center;
    &:after{
        content: "90 pixels";
    }
}

.right__cover{
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 100%;
    background: Tomato;
    text-align: center;
    &:after{
        content: "90 pixels";
    }
}