https://i.stack.imgur.com/LMsTg.png
I'm having trouble aligning the UI elements in my Bootstrap 5 project. I can't seem to pinpoint the issue despite trying various solutions. Here's the code snippet:
<div class="container">
<div class="accordion accordion-flush" id="accordionFlush">
@forelse($indicators As $indicator)
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne{{$indicator->id}}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne{{$indicator->id}}" aria-expanded="false" aria-controls="flush-collapseOne{{$indicator->id}}">
<div class="row align-items-center">
<div class="col-1 m-0">
<div class="p-2" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical "></i>
</div>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href=""><i class="fa-solid fa-plus"></i> Add Sub Indicator</a></li>
<li><a class="dropdown-item" href="/edit_indicator/{{$indicator->id}}"><i class="fa-solid fa-pen-to-square"></i> Edit</a></li>
<li><a class="dropdown-item" href="{{ route('delete_indicator', ['id' => $indicator->id]) }}"><i class="fa-solid fa-trash "></i> Delete</a></li>
</ul>
</div>
<div class="col-sm-2">
{{$indicator->indicator_name}}
</div>
<div class="col-8">
{{$indicator->indicator_desc}}
</div>
</div>
</button>
</h2>
<div id="flush-collapseOne{{$indicator->id}}" class="accordion-collapse collapse" aria-labelledby="flush-headingOne{{$indicator->id}}" data-bs-parent="#accordionFlush">
<div class="accordion-body">
Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.
</div>
</div>
</div>
@empty
No Data yet
@endforelse
</div>
</div>