Placing a vertical divider between text - html

Question

I need a vertical divider and the text to line up exactly like this on the top right hand corner of my screen.
I am having some trouble even getting the divider to show and the text to pull right
<div class="row">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
Css
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}

Answer 1

I can see that bootstrap 4 tag is added to your question. If you are using bootstrap 4, there is a in-built flex utility https://getbootstrap.com/docs/4.0/utilities/flex/
<div class="d-flex flex-row justify-content-end">
<div class="">
<span>Profile & Settings</span>
</div>
<div class="mx-2">|</div>
<div class="">
<span>Logout</span>
</div>
</div>
JS Fiddle: https://jsfiddle.net/8p27xwcs/

Answer 2

use "container" instead of "row", or set display:inline or block on the row div.
<div class="row" style="display:inline;" >
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
or
<div class="container">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>