Html 如何对齐两个盒子，一个盒子在另一个盒子的顶部，大小相同

我试图使用bootstrap flex和grid类来对齐下面代码中显示的两个框，但不知何故，它们都有不同的宽度

我尝试将两者的宽度设置为宽度=200px；看看发生了什么，弹性物品失去了位置

<!-- total income -->
                <div class="container">
                    <div class="budget__income d-flex justify-content-center mb-2">
                        <div class="row d-flex justify-content-center col-xs-1">
                            <div class="budget__income--text py-3">
                                <strong>Ingresos</strong>
                            </div>
                            <div class="budget__income--value py-3">
                                + 4,300 </div>
                            <div class="buget__income--percentage py-3 pl-2 align-self-center ">
                                34%
                            </div>
                        </div>
                    </div>
                    <!-- total expense -->
                    <div class="budget__expense d-flex justify-content-center">
                        <div class="row d-flex justify-content-center col-xs-1">
                            <div class="budget__expense--text py-3">
                                <strong>Gastos</strong>
                            </div>
                            <div class="budget__expense--value py-3">
                                + 4,300 </div>
                            <div class="buget__expense--percentage py-3 pl-2 align-self-center ">
                                22%
                            </div>
                        </div>
                    </div>
                </div>

Ingreos
+ 4,300 
34%
加斯托斯
+ 4,300 
22%

我希望两个指定的框水平对齐，并且都具有相同的宽度

---

非常感谢，请尝试使用表格、表格行和表格单元格显示。比如：

<div style="display: table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content1
    </div>
  </div>
  <div style="display: table-row">
    <div style="display: table-cell">
      content2
    </div>
  </div>
</div>

内容1
内容2

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看见