I am struggling to create a vertical divider and align the text properly in the top right corner of my screen.
https://i.sstatic.net/UqURE.png
Currently, I am facing issues with displaying the divider and positioning the text correctly.
<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;
}