title: Bootstrap 4 horizontal text alignment is not working in <span>
body: <p>I've the following code:</p>
  
  <pre><code>   &lt;div class="card" &gt;
          &lt;div class="card-block"&gt;    
              &lt;h4 class="card-title"&gt;
                  &lt;span class="text-left"&gt;&lt;/span&gt;
                  &lt;span class="text-right"&gt;Drago&lt;/span&gt;
              &lt;/h4&gt;
              &lt;span class="card-text"&gt;
                  Location: ???&lt;br&gt;
                  District: ???&lt;br&gt;
                  Last updated: Tue, May 8th 2018
              &lt;/span&gt;&lt;br&gt;&lt;br&gt;
              &lt;div class="card-buttons" class="text-center"&gt;
                  &lt;a href="#" class="btn btn-primary btn-sm"&gt;&lt;i class="fas fa-user-cog"&gt;&lt;/i&gt; Edit User&lt;/a&gt;
                  &lt;a href="#" class="btn btn-primary btn-sm"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt; Manage Addresses&lt;/a&gt;
                  &lt;a href="#" class="btn btn-danger btn-sm"&gt;&lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt; Delete&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to make a card in Bootstrap 4.</p>
  
  <p>I do want the emoji in the <code>&lt;h4&gt;</code> to be aligned left and the text after it to be aligned to the right. I'm trying to do it like this:</p>
  
  <pre><code>&lt;h4 class="card-title"&gt;
      &lt;span class="text-left"&gt;&lt;/span&gt;
      &lt;span class="text-right"&gt;Drago&lt;/span&gt;
  &lt;/h4&gt;
  </code></pre>
  
  <p>But this is not working, I get:</p>
  
  <p><a href="https://i.stack.imgur.com/vVyPd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vVyPd.png" alt="https://i.imgur.com/x5FOJuy.png"></a></p>
  
  <p>I also tried to do it without the bootstrap classes. Using <code>style="text-align: left"</code> and <code>style="text-align: right"</code>. However this also doesn't seem to work.</p>
  
  <p>When I use <code>&lt;div&gt;</code> the horizontal alignment works fine. I get this problem only with <code>&lt;span&gt;</code> and <code>&lt;div&gt;</code>s that have display property set to <code>inline-block</code> and <code>inline-flex</code>.</p>