<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>
After analyzing the code, I noticed that the first item in the list (the first div) is not aligned properly with the icon in the same row. My goal is to have the first item align completely left and centered within the row while having the second item align completely right and also be centered (currently only the second item is perfectly aligned).
I am determined to achieve this alignment using only bootstrap classes without adding any extra CSS. Any suggestions or solutions would be greatly appreciated. Thank you for your help!