title: How to display text and icon on the same line
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="card-header"&gt;
        &lt;span class="d-inline"&gt;Cars waiting pedestrians cross the street&lt;/span&gt;
        &lt;span class="d-inline btn d-flex justify-content-end"&gt;
            &lt;i class="fas fa-angle-down"&gt;&lt;/i&gt;
        &lt;/span&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>