The code snippet below is what I am currently working with:
<div class="card" >
<div class="card-block">
<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>
<span class="card-text">
Location: ???<br>
District: ???<br>
Last updated: Tue, May 8th 2018
</span><br><br>
<div class="card-buttons" class="text-center">
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a>
<a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a>
<a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a>
</div>
</div>
</div>
The main goal is to create a Bootstrap 4 card using this structure.
My aim is to have the emoji inside the <h4> tag aligned to the left and the text following it aligned to the right. This is what I have attempted:
<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>
Unfortunately, this method is not producing the desired result, as shown in the following image: https://i.sstatic.net/vVyPd.png
I have also tried adjusting the alignment without using Bootstrap classes, by adding inline styles style="text-align: left" and style="text-align: right". However, this approach has also proved to be ineffective.
Horizontal alignment seems to work fine when using <div> elements. The issue arises only when using <span> and <div> tags with display properties set to inline-block and inline-flex.