I recently created a website using HTML and CSS, featuring a topbar. However, I encountered an issue while trying to insert a vertical separator between some of the icons within the topbar.
Initially, when I added the separator-div, only the first three icons were displayed, with neither the separator nor the remaining icons appearing.
After applying display: inline; to the #topbar, both the separator and the other icons became visible but were positioned below the topbar.
I also experimented with adding white-space: nowrap; to #topbar, however, this adjustment did not produce the desired effect.
Is there a way to ensure that all elements in the topbar are displayed in a single line?
For reference, here is the relevant HTML and CSS code: https://jsfiddle.net/op28oohx/