title: Float right two span elements in Bootstrap
body: <p>I've been trying to have two span elements, one with Bootstrap 4 class 'close' and the other with class 'badge', floated right. The thing is if I add float-right to the badge, they always end up right next to each other. Or, if I use clear: right, the badge falls to the end of the div. </p>
  
  <p>This needs to be my outline:</p>
  
  <p><a href="https://i.stack.imgur.com/YSMyK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YSMyK.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the HTML I have so far:</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;div class="card-header"&gt;
      &lt;span class="close"&gt;x&lt;/span&gt;
      &lt;img src="image.png"&gt;
      &lt;h1 class="card-title d-inline"&gt;Title&lt;/h1&gt;
      &lt;span class="badge badge-default d-inline"&gt;Badge&lt;/span&gt;
      &lt;h2 class="card-subtitle"&gt;Subtitle&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I achieve that with Bootstrap 4? Thank you!</p>