JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <p>
    <a href="http://crh-pp.de/Datenrechtserklärung.php">Datenschutzerklärung</a>
  </p>
  <h1><strong>Kritisches Wörterbuch</strong>, zum Teil verlinkt mit Homepage-Beiträgen</h1>
  <p>von Christian Heinze</p>

  <p>Eine subpage zur Seite: / A Subpage to the Page: 
  	<a href="http://www.pro-re-publica.de">pro-re-publica.de</a>
	  <br>
    Stand 2020 02 19 - Das Wörterbuch ist unvollständig und Gegenstand laufender Ergänzung.
  </p>
</header>
<aside>
  <h2>Vorwort</h2>
	<p>	
    Dieses Wörterbuch ist eine Sammlung von <strong>Begriffen
    </strong>. Begriffe sind Wort-Namen für den Inbegriff 
    von Merkmalen aller möglichen Gegenstände des Denkens. 
    Sie bestehen in der Zuordnung von Begriffsnamen und 
    Begriffsmerkmalen. Begriffe sind Zweckschöpfungen des 
    kommunizierenden Publikums. (Siehe die Anmerkungen zum 
    Stichwort "Begriff".) Ihr idealer Zweck besteht in der 
    Bildung, Beschreibung und Aufbewahrung von Erkenntnissen 
    ihres Gegenstandes, sowie im Dienst an der Möglichkeit, 
    den Gegenstand zu gestalten. Begriffe müssen daher an 
    der Wirklichkeit orientiert sein, für die sie gelten 
    sollen. Sie dienen ihrem Zweck am besten durch Klarheit 
    und allgemeine Akzeptabilität.
	</p>
  <p>
    Begriffsbildung ist auf Unterstellungen und logische Konstruktionen
    angewiesen. 
    Begriffe eignen sich daher zur Beeinflussung und insbesondere Irreführung des 
    Publikums durch unbestimmte Unterstellungen und scheinlogische Konstruktionen. 
    Den extremen Anwendungsfall beschreibt die Geschichte von der Babylonischen
    Sprachverwirrung:
    <q>Auf, steigen wir hinab und verwirren dort ihre Sprache, so dass keiner
      mehr die Sprache des anderen versteht ... und sie hörten auf an der Stadt
      zu bauen. Darum nannte man die Stadt Babel (Wirrsal)...</q>
    (Genesis 11, 7 bis 9).
    Es besteht 
    Grund zu der Befürchtung, dass der gegenwärtige, vor allem politische 
    Sprachgebrauch sich auf einem...

CSS

header {
  background-image: url(http://www.pro-re-publica.de/img/pro-re-publica_subpage-shrinked.jpg);
  background-repeat: no-repeat;
  background-size: 365px;
  content: "";
  display: block;
  height: 200px;
  padding: 0 0 0 370px;
  text-align: center;
}

header h1 {
  font-size: 100%;
  font-weight: normal;
}

aside {
  font-style: italic;
  text-align: center;
}

aside q {
  font-style: normal;
}

#woerterbuch {
  list-style-type: upper-alpha;
}

#woerterbuch dl {
  border: 1px solid black;
  border-top: none;
  display: grid;
  grid-template-columns: 1fr calc(100% - 10em);
}

#woerterbuch dl dd {
  margin: 0;
  padding-left: 1em;
  margin-bottom: 1em;
}

#woerterbuch dl dd,
#woerterbuch dl dt {
  border-top: 1px solid black;
}

#woerterbuch dl dt {
  border-right: 1px solid black;
}

#woerterbuch dd ol {
  list-style-type: lower-alpha;
}