businesscard-qrcode/examples/layout.html

<div class="body">
  <style>
    * {
      box-sizing: border-box;
      --padding: 2mm;
      --paperwidth: 98mm;
      --paperheight: 62mm;
      --contentwidth: 90mm;
      --contentheight: 54mm;
      --fontsize: 8pt;
      --logoheight: 2cm;
    }

    div {
      border: 1px solid red;
    }

    .body {
      padding: 1cm;
      width: 100%;
      font-size: var(--fontsize);
      display: flex;
      justify-content: center;
      border: none;
    }

    .paper {
      width: var(--paperwidth);
      height: var(--paperheight);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .content {
      width: var(--contentwidth);
      height: var(--contentheight);
      display: grid;
      grid-template-rows: auto 1fr;
    }

    header {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "logo name" "logo company";
      gap: var(--padding);
      align-items: center;
      align-content: center;
      padding-bottom: var(--padding);
      border-bottom: 1mm solid black;
      margin-bottom: var(--padding);
    }

    header .logo {
      grid-area: logo;
      height: var(--logoheight);
      width: auto;
    }

    header .name {
      grid-area: name;
      text-align: right;
      align-self: end;
      font-size: larger;
    }

    header .company {
      grid-area: company;
      text-align: right;
      align-self: start;
      font-size: larger;
    }

    main {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas: "qrcode text" "pgpkey pgpkey";
      column-gap: var(--padding);
      row-gap: var(--padding);
    }

    main .qrcode {
      grid-area: qrcode;
      aspect-ratio: 1 / 1;
      height: 100%;
    }

    main .text {
      grid-area: text;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas: "address-prefix address" "info-prefix info";
      gap: var(--padding);
      align-items: center;
    }

    main .text .address-prefix {
      grid-area: address-prefix;
      text-align: left;
    }

    main .text .address {
      grid-area: address;
      text-align: right;
    }

    main .text .info-prefix {
      grid-area: info-prefix;
      text-align: left;
    }

    main .text .info {
      grid-area: info;
      text-align: right;
    }

    main .pgpkey {
      grid-area: pgpkey;
      text-align: center;
    }
  </style>
  <div class="paper">
    <div class="content">
      <header>
        <div class="logo">
          <img src="marc.png" alt="Marc" />
        </div>
        <div class="name">Name</div>
        <div class="company">Company</div>
      </header>
      <main>
        <div class="qrcode">QR</div>
        <div class="text">
          <div class="address-prefix">📍</div>
          <div class="address">address line 1<br />address line 2</div>
          <div class="info-prefix">🖁 tel:<br />✉ mailto:<br />⌂ https://</div>
          <div class="info">+41 76 123 45 67<br />email@example.com<br />website.com</div>
        </div>
        <div class="pgpkey">pgp</div>
      </main>
    </div>
  </div>
</div>