JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<header>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKeroqrMFYZdkAET7Z3RX3jW8YKdml0MkHPBZuqMmRueyLVFUK9KG-JP1l07wffZzDlfY&usqp=CAU">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwIaZxpZPnZgg2Zaa_cKthe-0Ztf27NEBjYA&usqp=CAU">
</header>
<main>
  <header>
    <h2>Fahrzeugrückholung</h2>
    <h2>Übergabeprotokoll</h2>
    <h2>D-Protokoll</h2>
  </header>
  <section class="two">
    <h3>
    Auftragsdaten
    </h3>
    <h3>
    Fahrzeugdaten
    </h3>
    <article>
      <small>Auftragsnummer</small>
      <span>503149141</span>
    </article>
    <article>
      <small>Kennzeichen</small>
      <span>SK-CC-600</span>
    </article>
    <article>
      <small>Fahrt</small>
      <span>H</span>
    </article>
    <article>
      <small>Fahrgestellnummer</small>
      <span>W0V0XEP68J4053241</span>
    </article>
    <article>
      <small>Auftraggeber</small>
      <span>Bank Deutsches Kraftfahrzeuggewerbe Abteilung
Fahrzeugmanagement</span>
    </article>
    <article>
      <small>Hersteller</small>
      <span>OPEL Corsa Limousine</span>
    </article>
    <article>
      <small>Referenz</small>
      <span>3732728</span>
    </article>
  </section>
  
  <section>
    <h3>
    Lieferadresse
    </h3>
  </section>
  
  <section>
    <h3>
    SITUATION BEI DER FAHRZEUGÜBERGABE
    </h3>
  </section>
  
</main>

CSS

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}
section.two {
  grid-template-columns: 1fr 1fr;
}

section h3 {
  text-align: left;
  background-color: #d9d9d9;
  padding: .25em;
  text-transform: uppercase;
}

article {
  display: flex;
  flex-direction: column;  
  gap: .25em;
  border-bottom: 1px solid #000;
}