[Using span instead of table element][1] [Using the table element][2]
Currently working with Bootstrap 5, my goal is to have a fixed-width table in place of dropdown menu items. I aim to position the text in the 3rd column all the way to the right. The date in that column and the dropdown arrows should align horizontally so that they appear stacked on top of each other.
When I replace table elements with spans throughout, it resembles image 1. However, when using tables as shown in my code below, it looks more like image 2. The issue arises where the dropdown arrows seem to shift leftward. How can I move them to the right while still being able to use table elements for cell positioning? Appreciate any guidance on this matter.
<div class="col-md-12 dropdown" id="premiumsDropdownBtn">
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu2" data-bs-toggle="dropdown">
<table>
<td>Dental: </td>
<td class="position-relative">PLAN A<span class="dropdown-arrow"></span></td>
<td style="text-align: right;">1/1/2023 - NA</td>
</table>
</div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu3" data-bs-toggle="dropdown">
<table>
<td>Dental: </td>
<td class="position-relative">PLAN B</td>
<td style="text-align: right;">1/1/2023 - NA</td>
</table>
</div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu4" data-bs-toggle="dropdown">
<table>
<td>Vision: </td>
<td class="position-relative">TEST PLAN C<span class="dropdown-arrow"></span></td>
<td style="text-align: right;">1/1/2023 - NA</td>
</table>
</div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu5" data-bs-toggle="dropdown">
<table>
<td>Vision: </td>
<td class="position-relative">LONGER PLAN D<span class="dropdown-arrow"></span></td>
<td style="text-align: right;">1/1/2023 - NA</td>
</table>
</div>
</div>