【CSS】display:gridとdisplay:contentsを使った柔軟な横並び

横並びのデザインで、左側の一番長いテキストに合わせて、左側のコンテンツ幅を決めたいということってあるんですが、これって私だけ？

display:gridとdisplay:contentsを使うとシンプルに記述できたのでメモです。

<div class="list">
    <dl class="list__item">
        <dt>出身</dt>
        <dd>三重県</dd>
    </dl>
    <dl class="list__item">
        <dt>資格</dt>
        <dd>第二種電気工事士、ボイラー技師、危険物取扱者乙4、愛玩動物飼養管理士、G検定</dd>
    </dl>
    <dl class="list__item">
        <dt>好きな食べ物</dt>
        <dd>コメダ珈琲のパン、魚、昆虫食</dd>
    </dl>
    <dl class="list__item">
        <dt>●●●●●●●●●●●●●●●●●●●</dt>
        <dd>▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</dd>
    </dl>
</div>

.list {
    display: grid;
    gap: 15px 40px;
    grid-template-columns: auto 1fr;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
}
.list__item {
    position: relative;
    display: contents;
    padding: 15px 0;
}
.list__item::before {
    display: block;
    grid-column: 1 / 3;
    background-color: #e6e6e6;
    width: 100%;
    height: 1px;
    content: "";
}