Horizontal lists with flex

style.css

/* Horizontal flex for lists and text. */
.list-flex {
    display: flex;
    justify-content: space-around;
}
.list-flex li {
    flex-grow: 1;
}
/* Horizontal flex for lists and text with a | devider. */
.list-flex-divider {
    display: flex;
    padding-left: unset;
    list-style-type: none;
}
.list-flex-divider li {
    flex-grow: 1;
    text-align: center;
    border-left: 1px solid var(--global-palette8);
}
.list-flex-divider li:first-child {
    border-left: unset;
}