Bootstrap 4 делает такие же кнопки

Question

Я хочу сделать левую и правую кнопки одинаковыми, сейчас я сделал это с помощью пользовательского CSS, но они отличаются в ПК и мобильном устройстве, вот как это выглядит сейчас.

Как кнопки выглядят сейчас

            <h3>
                <a href="" class="btn btn-outline-primary" id="one">SHORT</a>
                <a href="" class="btn btn-outline-primary" id="two">SHORT</a>
            </h3>
            <h3>
                <a href="" class="btn btn-outline-primary" id="three">FEW WORDS</a>
                <a href="" class="btn btn-outline-primary" id="four">SHORT</a>
            </h3>

CSS выглядит сейчас

Answer 1

Я могу предложить вам поместить их в таблицу, указав ширину 100%.

что-то в этом роде:

css:

td a {width: 100%}

 <table>
    <tr><td> 
            <a href="" class="btn btn-outline-primary" id="one">SHORT</a>
          </td>
          <td>
            <a href="" class="btn btn-outline-primary" id="two">SHORT</a>

        </td></tr>
        <tr><td> <a href="" class="btn btn-outline-primary" id="three">FEW WORDS</a>  </td>
            <td>
            <a href="" class="btn btn-outline-primary" id="four">SHORT</a></td></tr>
</table>