Table of divs with Flexbox

My Hobbies

Name
Description
Additional Resources
Playing Soccer
Soccer is a team sport played between two teams of eleven players with a spherical ball.
Wikipedia
Dancing
Dance is a performing art form consisting of purposefully selected sequences of human movement.
Wikipedia
Gardening
Gardening is the practice of growing and cultivating plants as part of horticulture.
Wikipedia

Code

<p id="caption">
  My Hobbies
</p>
<div aria-describedby="caption" class="table" role="grid">
  <div class="tr" role="row">
    <div class="th" role="columnheader">
      Name
    </div>
    <div class="th" role="columnheader">
      Description
    </div>
    <div class="th" role="columnheader">
      Additional Resources
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Playing Soccer
    </div>
    <div class="td" role="gridcell">
      Soccer is a team sport played between two teams of eleven players with a spherical ball.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Dancing
    </div>
    <div class="td" role="gridcell">
      Dance is a performing art form consisting of purposefully selected sequences of human movement.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
    </div>
  </div>
  <div class="tr" role="row">
    <div class="th" role="rowheader">
      Gardening
    </div>
    <div class="td" role="gridcell">
      Gardening is the practice of growing and cultivating plants as part of horticulture.
    </div>
    <div class="td" role="gridcell">
      <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
    </div>
  </div>
</div>
.table {
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.tr {
  display: flex;
}

.th, .td {
  border-top: 1px solid;
  border-right: 1px solid;
  padding: 4px 8px;
  flex: 1;
}

.th {
  font-weight: bold;
}
.th[role=rowheader] {
  background-color: lightgreen;
}
.th[role=columnheader] {
  background-color: lightpink;
}
NIL