How to make such a table in HTML/CSS? [Image attached]

<ul class="price-list">
    <li>
        <span class="title">Title</span>
        <span class="spacer"></span>
        <span class="price">$20.00</span>
        <span class="description">Description…</span>
    </li>
    <li>
        <span class="title">Title</span>
        <span class="spacer"></span>
        <span class="price">$20.00</span>
        <span class="description">Description…</span>
    </li>
    …
</ul>

.price-list {
    list-style: none;
    margin: 25px;
    padding: 0;
}
.price-list > li {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

@media (min-width: 500px){
    .price-list {
        column-count: 2;
        column-gap: 25px;
    }
    .price-list > li {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

.title {
    font-weight: bold;
}
.spacer {
    flex: 1 1 0;
    border-bottom: 2px dotted silver;
}
.price {
    color: gold;
}
.description {
    flex-basis: 100%;
    color: #777;
}