Размещение вертикального разделителя между текстом

Question

Мне нужен вертикальный разделитель и текст для выравнивания точно так же, как это в правом верхнем углу экрана.

У меня возникли проблемы даже при отображении разделителя и правильного текста

<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

Я вижу, что тэг bootstrap 4 добавлен к вашему вопросу. Если вы используете загрузчик 4, есть встроенная утилита flex 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>

или

 <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>