I'm currently working with Vue.js and using a UI component framework designed for it. I'm facing an issue where aligning numbers like 500 or 5000, as well as icons, is proving to be difficult. The numbers in the rightmost column need to be aligned properly, so I tried wrapping them in a div. However, I still can't get it to work correctly. Can anyone provide guidance on how to resolve this?https://i.stack.imgur.com/GspBg.png
<v-list-item
v-for="result in results"
:key="result.id"
class="grey lighten-3 mb-1"
>
<v-list-item-content class="my-1 px-2">
<v-list-item-title>
{{ $datetime(new Date(result.timestamp * 1000)) }}
</v-list-item-title>
</v-list-item-content>
<div>
<v-list-item-content
v-if="$vuetify.breakpoint.smAndUp"
class="my-1 px-2"
>
<v-list-item-title>
{{ $n(result.used) }}
<v-icon size="20">
mdi-arrow-right-bold
</v-icon>
</v-list-item-title>
</v-list-item-content>
</div>
<div>
<v-list-item-content class="my-1 px-2">
<v-list-item-title>
{{ $n(result.point) }}
</v-list-item-title>
</v-list-item-content>
</div>
</v-list-item>