Upvote and downvote buttons are not showing opposite one another - html

Question

I am building a BlogApp and I am trying to make upvote and downbutton , Like Stack Overflow shows BUT my buttons are not showing opposite one another.
They are showing like:
template.html
<!-- Upvote button -->
<span id="id_likes{{topic.id}}">
{% if user in topic.likes.all %}
<button name='submit' type='submit' value="like"><i class="btn fas fa-sort-up fa-6x fa-lg post-buttons " ></i></button>
{% endif %}
</span>
<!-- DownVote button -->
<span id="id_dislikes{{topic.id}}">
{% if user in topic.dislikes.all %}
<button name='submit' type='submit' value="dislike"><i class="fas fa-sort-down fa-6x"></i></button>
{% endif %}
</span>
When I use div instead of span then it shows like this:
It was showing border on buttons then I used:
<style>
button {
padding: 0;
border: none;
background: none;
}
</style>
Any help would be much appreciated.

Answer 1

If you check out the Fontawesome site for these icons (up and down), you'll see that they're designed as a pair, so that (when they're overlaid) the up arrow will be above the down arrow. If you use them separately, as you're doing, that means they're naturally high and low.
Basically, you've done nothing wrong - that's how these characters were designed to appear!
If you want to line them up, you'll need to manually alter the positions of one or both to get them as you want. You could use css top or padding, as you prefer.

Answer 2

I have removed your dynamic code and added one css class.
button {
padding: 0;
border: none;
background: none;
}
.btnOuter{
display: block;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<span>
<button class="btnOuter" name='submit' type='submit' value="like">
<i class="fas fa-sort-up fa-6x fa-lg post-buttons" ></i>
</button>
</span>
<span>
<button class="btnOuter" name='submit' type='submit' value="dislike">
<i class="fas fa-sort-down fa-6x"></i>
</button>
</span>