Align Bootstrap Tags with Text in List

Question

How can I align the right side of the tag with the left side of the text (image attached shows the problem) so it looks like this:

superlongtagname | text1
  shortertagname | text2
     tinytagname | text3

Here's what mine looks like now:

Here is my template code (looping through a list of Django objects):

<ul>
    <li>
        <span class="badge bg-{{ t.get_color_display }}">
          {{ t.name }}
        </span>
        {{ rn.entry_text }}
    </li>
</ul>

I've tried alignment utilities (align-end), floating (on both the li and the span), etc, and nothing seems to work.

UPDATE
I was able to get this working with @Michael H's help. I was trying avoid tables, but after fiddling with it a while, it's not that bad.

Answer 1

I'd use a table instead of the <ul> tag:

    <table class="table table-borderless">
      <tbody>
        <tr>
          <td class="text-end">
            <span class="badge bg-success">
              added
            </span>
          </td>
          <td class="w-100">Added something</td>
        </tr>
        <!--Other items-->
      </tbody>
    </table>

Here's my jsFiddle

The result will look like this: