Have idea – don’t know how to execute,

Okay – How to add separators.

There needs to be some dynamic element to it as to not add an “arrow” icon after the last position listed. This is important because not every employee will have a fixed number of positions. Some might have 5 others 3 while others might have 4.

Here is a link to the mock-up:
https://imgur.com/a/ua8mAjk

Any how-to is appreciated!
Thanks!

I got it now… (CHATGPT to the rescue)

.career-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.career-path .gb-text {
    display: flex;
    align-items: center;
    margin: 0; /* remove default h5 spacing */
}

/* Triangle separator */
.career-path .gb-text:not(:last-child)::after {
    content: "";
    display: inline-block;
    margin: 0 12px;
    width: 0;
    height: 0;
    border-left: 6px solid #1f3a5f; /* adjust to brand color */
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

Figured it out. Took me a while. Really appreciate it!

I wasn’t seeing what you were saying earlier… kept at it though! :^)

Close – then discovered something… The icons do not know they are in a last position. So while then LAST (5th) position contains no arrow – the others do.

The last visible position should not. You can see what I mean by following the link I provided in the private info.

So should I revert to the css I suggested above?

Awesome and easy fix. Had it in my head that what happens to text happens to icon (that they weren’t independent).

Appreciate it everyone!