Align list item without extra CSS (bootstrap) - html

Question

<div class="card-body p-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between" th:each="extraConfig : ${extraConfigsPage.content}">
<div>
<a class="item-link">
<span class="item-name ml-2" th:text="${extraConfig.description}"></span>
</a>
</div>
<div>
<a class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteReportModal">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</li>
</ul>
</div>
This is my code. My problem is that the first item in the list (the first div) is not aligned in the center of the icon that exists in the same row. I want the first item to be aligned totally left and in the center of the row, and the second one to be aligned totally right and again in the center (with this code the second item is perfectly aligned).
I don't want to use extra CSS, I want to use only bootstrap classes.
Any ideas? Thanks in advance!

Answer 1

If you could add the bootstrap class align-baseline to your anchor tag for the icon, it will move the icon up to the center of the list item, and that should line up the icon with the center of your left-side tag:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">
<div>
<a class="item-link">
<span class="item-name ml-2">Fling</span>
</a>
</div>
<div>
<a class="btn btn-outline-danger align-baseline" data-toggle="modal" data-target="#deleteReportModal">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</li>
</ul>
</div>
I removed the th: so the snippet has plain HTML and I added a word with a descender in the first tag for comparison.