Vueのv-forディレクティブ処理内のレイアウトについて

うまい質問分が思い浮かばないのですが、、、

Vueのv-forで複数の値をリストで表示するですが、個々の横にボタンを配置しています。
このボタンを右側に縦を揃えて表示したいのです。

（画像の「テキストを表示する」の部分のレイアウトをうまく変更することができないです
col-4 等で指定したりしましたが、リストとボタンがセットで動いてしまいます）

            <ol class="list-group">
                <li v-for="item in objectKey" class="list-group-item">
                    {{ item.Key }}
                    <b-button v-on:click="showTranscribeText(item.Key)" pill>{{ buttonMessage }}</b-button>
                </li>
            </ol>

https://bootstrap-vue.org/はCDNですが設定済みです。
CSSファイルは特に作成していないです
下記が生成後のHTMLの抜粋です

<div id="app"><div class="container-fuild border"><p>[]</p> <p class="card-text">開発</p> <ol class="list-group"><li class="list-group-item">
                    20200511080505.txt
                    <button type="button" class="btn btn-secondary rounded-pill">テキストを表示する</button></li><li class="list-group-item">
                    20200511080505.txt
                    <button type="button" class="btn btn-secondary rounded-pill">テキストを表示する</button></li><li class="list-group-item">
                    20200513010146.txt
                    <button type="button" class="btn btn-secondary rounded-pill">テキストを表示する</button></li><li class="list-group-item">
                    20200515023540.txt
                    <button type="button" class="btn btn-secondary rounded-pill">テキストを表示する</button></li></ol>