如何对齐分配要素，无论文本长度如何？

Question

<div>
   <button>Lorem ipsum</button> <span>20</span>
   <button>consectetur adipiscing elit</button> <span>30</span>
   <button>ABC</button> <span>40</span>
   <button>Something!</button> <span>50</span>
</div>

我希望输出屏幕看起来像以下内容：

Lorem ipsum                   20
consectetur adipiscing elit.  30
ABC                           40
Something!                    50

Answer 1

使用CSS网格

div {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0 10px;
  justify-items:start;
}

<div>
  <button>Lorem ipsum</button> <span>20</span>
  <button>consectetur adipiscing elit</button> <span>30</span>
  <button>ABC</button> <span>40</span>
  <button>Something!</button> <span>50</span>
</div>