How to left/right align two spans in a flexbox div

Question

I have a header bar that fills the width of the browser. I have two items of text, one I want on the left and the other on the right. How do I achieve this?

Code so far

<div className="logtailTitle">
   <span>{this.props.initialDataReceived ? this.props.logtailApplicationName : null}</span>
   <span>{this.props.initialDataReceived ? this.props.logtailPathName : null}</span>
</div>

.logtailTitle {
    flex: 0 4em;
    background-color: #555;
    color: #bbb;
    vertical-align: middle;
    display: flex;
    font-style: italic;
    font-size: 12px;
    padding: 7px 15px 8px 15px;
}

Answer 1

You can set justify-content: space-between property on the flex-container or you can use margin-left: auto on the second element and that will push it to the right side.

Note: For the vertical alignment of flex-children if the flex-direction is row you want to use align-items property instead of vertical-align on the flex-container.

.logtailTitle {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  
  background-color: #555;
  font-style: italic;
  padding: 7px 15px 8px 15px;
  color: #bbb;
  font-size: 12px;
  width: 100%;
}

<div class="logtailTitle">
  <span>left</span>
  <span>right</span>
</div>