left right alignment for key-pair value in bootstrap

Question

Lets say I have the following:

        <div class="card">
            <ul class="list-group list-group-flush ">
                <li class="list-group-item" style="border: none;">
                    <strong>Something</strong> : 12333434
                </li>
                <li class="list-group-item" style="border: none">
                    <strong>Something else</strong>: 2837487248723847283
                </li>
                <li class="list-group-item" style="border: none">
                    <strong>Some other stuff</strong>: 123442342423423
                </li>
            </ul>
        </div>

Above looks like the following in browser:

However ideally I want it to look like the following (ignore the font change. I only care about the alignment):

Meaning the left side gets aligned to the right while the right side text gets aligned to the left. How can I achieve this in bootstrap?

Answer 1

Using inline-block this can be achieved.By default strong is inline.

strong{
  display:inline-block;
  width:200px;
  text-align:right;
}

Here is the fiddle link