r/Anki question 5x2 grid

https://www.reddit.com/r/Anki/comments/vhcs9h/comment/ihuhtwv/?context=3

by OjisanSeiuchi

HTML

<!-- 

I don't know what your
field names are, so I used  numbered
fields and repeated them in the 
second row

-->

<!-- this is the first row -->
<div class="float-wrap">
  <div>
    <p>{{field 1}}</p>
    <p>{{field 2}}</p>
  </div>

  <div>
    <p>{{field 3}}</p>
    <p>{{field 4}}</p>
  </div>

  <div>
    <p>{{field 5}}</p>
    <p>{{field 6}}</p>
  </div>

  <div>
    <p>{{field 7}}</p>
    <p>{{field 8}}</p>
  </div>

  <div>
    <p>{{field 9}}</p>
    <p>{{field 10}}</p>
  </div>
</div>

<!-- this is the second row -->
<div class="float-wrap">
  <div>
    <p>{{field 1}}</p>
    <p>{{field 2}}</p>
  </div>

  <div>
    <p>{{field 3}}</p>
    <p>{{field 4}}</p>
  </div>

  <div>
    <p>{{field 5}}</p>
    <p>{{field 6}}</p>
  </div>

  <div>
    <p>{{field 7}}</p>
    <p>{{field 8}}</p>
  </div>

  <div>
    <p>{{field 9}}</p>
    <p>{{field 10}}</p>
  </div>
</div>

CSS

/* (A) CLEARFIX CONTAINER */
.float-wrap { overflow: auto; }
.float-wrap::after {
  content: "";
  clear: both;
  display: table;
}
 
html { 
    background-color: darkgray;
}

.float-wrap > * { float: left; }
 
.float-wrap > * {
  color: white;
  border: 1px solid yellow;
  box-sizing: border-box;
  width: 20%; padding: 10px;
  background: darkblue;
}