How to display text and icon on the same line

Question

I'm working with bootstrap 4 and fontawesome and want to display text and an icon on the same line. The text should be on the left corner while the icon at the right corner. At the moment, I'm unable to keep both text and icon on the same line, the icon seems to move to a line below the text. How can i fix this?

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline">Cars waiting pedestrians cross the street</span>
      <span class="d-inline btn d-flex justify-content-end">
          <i class="fas fa-angle-down"></i>
      </span>
    </div>

Answer 1

Try this one. I've removed d-flex, replaced justify-content-end with float-right and d-inline to d-inline-block

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline-block">Cars waiting pedestrians cross the street</span>
      <span class="d-inline-block btn float-right">
          <i class="fas fa-angle-down"></i>
      </span>
  </div>