Калькулятор сетки Bootstrap или Flex Box

Я хочу построить сетку с помощью bootstap или flex-box, которая должна выглядеть так:

К сожалению, моя попытка с загрузочной сеткой не работает должным образом. Я хочу, чтобы числа (11, 2) были выровнены правильно и имели один и тот же блок div. Я ожидаю, что div с номером 2 должен иметь ту же ширину, что и div с номером 11, это означает, что ширина этих div-боксов должна основываться на большем (11). Предоставление этим двум div статической ширины столбца - это не то, что я хочу.

HTML:

<h6 class = "py-2">my attempt</h6>

<div class = "row text-right">
 <div class = "col col-md-auto width-should-be-equal">11</div>
 <div class = "col col-md-auto">*</div>
 <div class = "col col-md-auto">50$</div>
 <div class = "col col-md-auto text-center">=</div>
 <div class = "col col-md-auto">550$</div>
</div>

<div class = "row text-right">
 <div class = "col col-md-auto width-should-be-equal"> 2</div>
 <div class = "col col-md-auto">*</div>
 <div class = "col col-md-auto">500$</div>
 <div class = "col col-md-auto text-center">=</div>
 <div class = "col col-md-auto">1000$</div>
</div>


<h6 class = "py-2">not the goal</h6>

<div class = "row text-right">
 <div class = "col col-md-2 width-should-be-equal">11 </div>
 <div class = "col col-md-auto">*</div>
 <div class = "col col-md-auto">50$</div>
 <div class = "col col-md-auto text-center">=</div>
 <div class = "col col-md-auto">550$ </div>
</div>

<div class = "row text-right">
 <div class = "col col-md-2 width-should-be-equal">2</div>
 <div class = "col col-md-auto">*</div>
 <div class = "col col-md-auto">500$</div>
 <div class = "col col-md-auto text-center">=</div>
 <div class = "col col-md-auto">1000$</div>
</div>

CSS:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
 border: solid 1px #6c757d;
 padding: 10px;
}

.width-should-be-equal {
  border: 1px solid blue;
}

Спасибо за помощь!

https://jsfiddle.net/6qojnz78/