Как мне переделать кнопку, чтобы она стояла «Как надо»?

Question

[Максим Никитин]

хочу сделать красивый калькулятор, не знаю, как изменить расположение кнопки так, чтобы и другие могли спокойно находиться с ней. Использую в основном Bootstrap, могу и просто сделать вставку CSS

как я хочу:


как все выглядит:


часть кода:

<div class="card" style="width: 14rem;">
        <input class=" input_color" type="text" disabled>
        <div class="card-body">            
                <button value="+" style="width: 34.63px;" class="btn btn-info m-1">+</button>
                <button value="-" style="width: 34.63px;" class="btn btn-info m-1">-</button>
                <button value="*" style="width: 34.63px;" class="btn btn-info m-1">*</button>
                <button value="/" style="width: 34.63px;" class="btn btn-info m-1">%</button>
                <button value="7" class="btn btn-light m-1">7</button>
                <button value="8" class="btn btn-light m-1">8</button>
                <button value="9" class="btn btn-light m-1">9</button>
                <button value="4" class="btn btn-light m-1">4</button>
                <button value="5" class="btn btn-light m-1">5</button>
                <button value="6" class="btn btn-light m-1">6</button>
                <button value="1" class="btn btn-light m-1">1</button>
                <button value="2" class="btn btn-light m-1">2</button>
                <button value="3" class="btn btn-light m-1">3</button>
                <button value="0" class="btn btn-light m-1">0</button>
                <button value="." style="width: 34.63px;" class="btn btn-info m-1">.</button>
                <button value="clear" style="width: 34.63px;" class="btn btn-danger m-1">C</button>
                <button value="=" style="width: 34.63px; height: 162px;" class="btn btn-warning m-1 hight_from_max">=</button>
            </div>
        </div>
      </div>

Answer 1

[Rsa97]