Как уменьшить размер пунктирных границ на изображении, если ширина экрана меньше 991 пикселя?

Question

Я пытаюсь сделать так, чтобы пунктирные рамки во второй ссылке на изображение выглядели так же, как на первом изображении, когда экран имеет ширину 991 pixels.Я думаю, что div, которые содержат слова и числа, являются блочными, возможно, поэтому он занимает 100% ширины.Ниже приведена часть компонента карты с пунктирными полями.

Первое изображение https://imgur.com/a/v8vTveg

Второе изображение https://imgur.com/a/RxdU8zN

Я попытался изменить div с помощью класса text-truncate и div с номерами и "tl" для отображения: inline-block, но они все еще занимают 100% ширину контейнера, что я могу сделать?

<div class="price adsl-price">
     <div class="row no-gutters mt-2">
       <!-- <div class="col">1 AYLIK 170t</div>  -->
               <div class="col lira border-dash-left">
                  <span class="month">3</span>
                  <span class="text-truncate">AYLIK</span> 
                  <div>490tl</div>
               </div>

               <div class="col lira border-dash-left"> 
                  <span class="month">6</span> 
                  <div class="text-truncate">AYLIK</div> 
                    <div>950tl</div>
               </div>

               <div class="col lira border-dash-left">
                  <span class="month">12</span>
                  <div class="text-truncate">AYLIK</div>
                  <div>1550tl</div>
               </div>                
     </div>
</div>