.separator-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.separator-vertical-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

    .separator-vertical-text::before,
    .separator-vertical-text::after {
        content: '';
        flex: 1;
        width: 3px;
        background: currentColor;
        /* matches font color */
        margin: .25em;
    }

.separator-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.separator-horizontal-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1;
}

    .separator-horizontal-text::before,
    .separator-horizontal-text::after {
        content: '';
        flex: 1;
        height: 3px;
        background: currentColor;
        /* matches font color */
        margin: .25em;
    }