JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ansprechpartner">
<li>
  <dl class="heading">
    <dt>Adresse</dt>
    <dd>Ansprechpartner</dd>
  </dl>
</li>
<li><a href="https://www.gov.uk/government/organisations/prime-ministers-office-10-downing-street">
  <dl>
    <dt>10 Downing Street, London</dt>
    <dd>May, Theresa</dd>
  </dl></a>
</li>
<li><a href="https://www.whitehouse.gov/">
  <dl>
    <dt>1600 Pennsylvania Avenue, Washington, D.C.</dt>
    <dd>Trump, Donald<br>John F. Kelly</dd>
  </dl></a>
</li>
</ul>

CSS

ul.ansprechpartner {
  list-style: none;
  padding: 0; margin: 0;
  border: 2px solid black;
}

.ansprechpartner .heading {
  font-weight: bold;
}

.ansprechpartner a {
  text-decoration:none;
  display:block;
}
.ansprechpartner a:hover, .ansprechpartner a:focus {
  background-color: #ffc;
}

.ansprechpartner dl {
  display:flex;
  padding 0; margin: 0;
}
.ansprechpartner dl.heading {
  background-color: #ccc;
}
.ansprechpartner dl:not(.heading) {
  border-top: 1px solid black;
}

.ansprechpartner dt {
  flex: 1 0 auto;
  padding: 0.1em;
  border-right: 1px solid black;
}
.ansprechpartner dd {
  flex: 0 0 15em;
  padding: 0.1em;
  margin: 0;
}