JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
<dt><div class="name">Loki</div><div class="price">105,-</div></dt>
<dd>Cinnamon Whiskey, ...</dd>
<dt><div class="name">Alexander (of Macedon)</div><div class="price">110,-</div></dt>
<dd>Brandy, ...</dd>
</dl>

CSS

dt div {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

dt div.name {
    width: calc(100% - 50px);
}
dt div.name::after {
  content: ' ..........................................................................................................';
}
dt div.price {
  float: right;
}
dd {
  font-size: 0.8em;
  margin-left: 10px;
  margin-bottom: 0.7em;
}