Something like this:
<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>
CSS:
.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;
}
Demo[
^]
EDIT: Updated so that the list only splits into two columns on screens that are at least 500px wide.