Bootstrap下拉菜单根据内部元素设置宽度

Question

我有一个Bootstrap下拉列表，里面有一堆li个。当选择其中一个时，我以编程方式在右侧添加一个复选标记。

现在我的<li>看起来像是：

<li data-original-index="1">
    <a>
        <span class="glyphicon check-mark hidden-glyph pull-right" width="30px">
        </span>
        <span class="text">Anime-Manga</span></a></li>

（在第二个跨度之后移动第一个跨度不做任何事情） 我有JQuery代码，它将glyphicon-ok添加到范围，并在选中时删除hidden-glyph。它主要起作用，但是当您选择列表中最长的元素时，复选标记会出现在单词的顶部。

理想情况下，菜单宽度会在需要时增长（例如，只有在点击最宽的时才会增加），但我看起来像是这样：

SOMETEXTGOESHERE | | 当它没有被选中时，那么当它完成时，复选标记会进入那个位置。

想法？

根据要求： https://jsfiddle.net/Lpprgmry/