html - CSS Grid rows in alignment but they create unnecessary white space below the entries

Question

it's about the CSS for my digital edition of my doctoral thesis.

We have such a new LaTeX package that not only allows us to compile a nice pdf with a decent critical device, but it also spits out a TEI-based xml file at the same time. This is automatically converted into an .html file with an XSLT2 processor.

I have attached the html file and the CSS file.

It works well. However, I still have a tiny problem with the display of the html

I use a CSS grid (see style.css) with two columns and any number of rows to map the one .edition paragraph and one .translation paragraph in alignment in the .html file. That works too and is aligned. However, the height of the rows is always based on the highest paragraph in the superordinate . This creates a lot of white space in the rows of the grid. I would love to have this excess white space no longer there. But I just can't get it right and have already spent hours experimenting, and although I've come a long way with the help of others, I can't do this fine-tuning. Nevertheless, I am convinced that it should be possible somehow with CSS.

Do you have the brilliant idea?

I would be really grateful for help.

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  grid-gap: 0.5rem;
}

h1 {
  grid-column-start: 1;
  grid-column-end: none;
}

.edition,
.translation {
  display: inherit;
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: 1fr;
  row-gap: 10px
}

.edition {
  grid-column-start: 1;
}

.translation {
  grid-column-start: 2;
}

.edition>div[type="ed"] {
  background-color: #def;
  padding: 0.5rem;
}

.translation>div[type="trans"] {
  background-color: #abc;
  padding: 0.5rem;
}

<h1>Tattvayogabindu</h1>

<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-edition_1" class="edition">
  <div type="ed">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <centerline>
      <textrm><small>[Introduction]</small></textrm>
    </centerline>
    <div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
      <p> <mark>?rī ga?e?āya nama?</mark> // </p>
      <div class="app"><span class="lem">?rī ga?e?āya nama? (<a href="#E" title="E Printed Edition">E</a> <a href="#L" title="L LALCHAND 5876">L</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span>        ?rī ?e ya ma? (<a href="#P" title="P Pune BORI 664">P</a>), ?rī gurave nama? (<a href="#N1" title="N1 NGMPP 38/31">N1</a>), ?rī sarasvatyai nama? ?rī nira?janāya nama? (<a href="#D1" title="D1 IGNCA 30019">D1</a>), o? ?rī nira?janāya (<a href="#U1"
          title="U1 SORI 1574">U1</a>)</div>
    </div>
  </div>
  <div type="ed">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
      <p> <mark>atha rājayogaprakāro likhyate</mark> // </p>
      <div class="app"><span class="lem">atha rājayogaprakāro likhyate (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a>) ]</span> atha rājayogaprakāra likhyate (<a href="#U1" title="U1 SORI 1574">U1</a>), rājayogāntargata? / binduyoga?
        (<a href="#E" title="E Printed Edition">E</a>), atha tattvabi?duyogaprāra?bha? (<a href="#L" title="L LALCHAND 5876">L</a>), atha rājayoga li?yate (<a href="#P" title="P Pune BORI 664">P</a>), atha rājayoga likhyate (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
    </div>
  </div>
  <div type="ed">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <div xmlns="http://www.w3.org/1999/xhtml" class="wapp">
      <p> rājayogasyeda? phala? / yena rājayogenānekarājyabhogasamaya eva / anekapārthivavinoda<mark>prek?a?asamaya</mark> eva / bahutarakāla? ?arīrasthitirbhavati / sa <mark>eva</mark> rājayoga? / tasyaite bhedā? / </p>
      <div class="app"><span class="lem">prek?a?asamaya (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> prek?ya?asamaya (<a href="#U2"
          title="U2 SORI 6082">U2</a>)</div>
      <div class="app"><span class="lem">eva (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> eva? (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
    </div>
  </div>
  <div type="ed">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <div xmlns="http://www.w3.org/1999/xhtml" class="row">
      <div class="column">
        <div class="wapp">
          <p>kriyāyoga? / j?ānayoga? / <mark>cāryayoga?</mark> / ha?hayoga? / karmayoga? / <mark>layayoga?</mark> / dhyānayoga? / mantrayoga? / <mark>lak?yayoga?</mark> / vāsanāyoga? / ?ivayoga? / brahmayoga? / advaitayoga? / <mark>siddhayoga? / rājayoga?</mark>            / <mark>ete pa?cada?ayogā?</mark> //</p>
          <div class="app"><span class="lem">cāryayoga? (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> tvaryāyoga? (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
          <div class="app"><span class="lem">layayoga? (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> nayayoga? (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
          <div class="app"><span class="lem">lak?yayoga? (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> lak?ayoga? (<a href="#U1" title="U1 SORI 1574">U1</a>)</div>
          <div class="app"><span class="lem">siddhayoga? / rājayoga? (<a href="#P" title="P Pune BORI 664">P</a> <a href="#U2" title="U2 SORI 6082">U2</a>) ]</span> rājayoga? / siddhayoga? (<a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a>            <a href="#U1" title="U1 SORI 1574">U1</a>)</div>
          <div class="app"><span class="lem">ete pa?cada?ayogā? (<a href="#P" title="P Pune BORI 664">P</a> <a href="#N1" title="N1 NGMPP 38/31">N1</a> <a href="#D1" title="D1 IGNCA 30019">D1</a> <a href="#U1" title="U1 SORI 1574">U1</a>) ]</span> eva? pa?cada?āyogā bhava?ti
            (<a href="#U2" title="U2 SORI 6082">U2</a>)</div>
        </div>
      </div>
      <div class="column">
        <p class="analysis">The initial codification of 15 yogas appears in N1,P,D1,U1 and U2. It is ommitted in E and L. B can't be determined due to missing folios. P is the only witness which numbers the yogas with devanāgarī-digits. The other witnesses separate the list
          with single or double da??as.</p>
      </div>
    </div>
  </div>
</div>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-translation_1" class="translation">
  <div type="trans">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <centerline>
      <textrm><small>[Introduction]</small></textrm>
    </centerline>
    <p xmlns="http://www.w3.org/1999/xhtml">Homage to ?rī Ga?e?a.</p>
  </div>
  <div type="trans">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <p xmlns="http://www.w3.org/1999/xhtml"> Now the methods of rājayoga are laid down. </p>
  </div>
  <div type="trans">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <p xmlns="http://www.w3.org/1999/xhtml">This is the result of <span class="italic">rājayoga</span><span class="note">This statement seems unconnected to the definition of rājayoga that follows.</span>: <span class="italic">Rājayoga</span> is that by which longterm durability of the body
      arises even amongst manifold royal pleasures even amongst the manifold royal entertainments and spectacle. This truly is <span class="italic">rājayoga</span>. Of this [<span class="italic">rājayoga</span>] these are the varieties: </p>
  </div>
  <div type="trans">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <p xmlns="http://www.w3.org/1999/xhtml">1. Yoga of [mental] action (<span class="italic">kriyāyoga</span>), 2. Yoga of knowledge (<span class="italic">j?ānayoga</span>), 3. Yoga of wandering (<span class="italic">caryāyoga</span>), 4. Yoga of force (<span class="italic">ha?hayoga</span>),
      5. Yoga of deeds (<span class="italic">karmayoga</span>), 6. Yoga of absorption (<span class="italic">layayoga</span>), 7. Yoga of meditation (<span class="italic">dhyānayoga</span>), 8. Yoga of mantras (<span class="italic">mantrayoga</span>),
      9. Yoga of fixation objects (<span class="italic">lak?yayoga</span>), 10. Yoga of mental residues (<span class="italic">vāsanāyoga</span>), 11. Yoga of ?iva (<span class="italic">?ivayoga</span>), 12. Yoga of Brahman (<span class="italic">brahmayoga</span>),
      13. Yoga of non-duality (<span class="italic">advaitayoga</span>), 14. Yoga of completion (<span class="italic">siddhayoga</span>) 15. Yoga of kings (<span class="italic">rājayoga</span>). These are the fifteen <span class="italic">yoga</span>s.
      <span
        class="note">At the current stage of research it is not clear if this list is a later addition by another scribe or, if indeed it originally stems from Rāmacandra. The list suggests a text following the order of yogas according to this list. However, the order
        and even the designation of some of the yogas given in the list is just followed very loosely in the text.</span>
    </p>
  </div>
</div>
<div xmlns="http://www.tei-c.org/ns/1.0" xml:id="div-edition_2" class="edition">
  <div type="ed">
    <h3 xmlns="http://www.w3.org/1999/xhtml"></h3>
    <centerline>
      <text

Answer 1

Waitting for answers