JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="explanations">
<dt class="q1">Merkwürdigkeit 1</dt>
<dd>Erklärung der Merkwürdigkeit 1</dd>
<dt class="q2">Merkwürdigkeit 2</dt>
<dd>Erklärung der Merkwürdigkeit 2</dd>
<dt class="q3">Merkwürdigkeit 3</dt>
<dd>Erklärung der Merkwürdigkeit 3 mit vielen Worten, die keinen Sinn ergeben aber dennoch eine Menge Platz in Anspruch nehmen und deine Aufmerksamkeit ablenken.</dd>
</dl>

CSS

.explanations dt {
  display: inline-block;
  border: thin solid #808080;
  padding: 0.3em;
}
.explanations .q1
{
  background-color:red;
}
.explanations .q2
{
  background-color: blue;
}
.explanations .q3
{
  background-color:green;
}

dl.explanations {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-content: middle;
  gap: 0.5em 1em;
}
dl.explanations dt {
  align-self: start;
}
dl.explanations dd {
  margin-left: 0;
  padding-top: 0.3em;
  border-top: thin dashed silver;
}