Definition List (table like)

Add a description to a term in this table styled Description list. Love us some semantic HTML

Rendered Component

CAP: Computing Accounts and Passwords; a team within the IT Service Center that specifically handles access requests and Brown username/password issues.
CIS: Computing & Information Services, our department’s former name
CR: Change Request: A type of ticket that is requesting a change to an existing business system. A CR may involve a minor or more significant change.
DCC: Department Computing Coordinator
DLD: Digital Learning & Design - part of the Sheridan Center for Teaching and Learning
EAS: Enterprise Applications and Software Engineering

HTML

<dl class="definition-list-container">
  <dt class="definition-list-term">CAP</dt>
  <dd class="definition-list-definition">Computing Accounts and Passwords; a team within the IT Service Center that specifically handles access requests and Brown username/password issues. </dd>
  <dt class="definition-list-term">CIS</dt>
  <dd class="definition-list-definition">Computing &amp; Information Services, our department’s former name</dd>
  <dt class="definition-list-term">CR: Change Request </dt>
  <dd class="definition-list-definition">A type of ticket that is requesting a change to an existing business system. A CR may involve a minor or more significant change.</dd>
  <dt class="definition-list-term">DCC</dt>
  <dd class="definition-list-definition">Department Computing Coordinator</dd>
  <dt class="definition-list-term">DLD</dt>
  <dd class="definition-list-definition">Digital Learning &amp; Design - part of the Sheridan Center for Teaching and Learning</dd>
  <dt class="definition-list-term">EAS</dt>
  <dd class="definition-list-definition">Enterprise Applications and Software Engineering</dd>
</dl>

CSS

.definition-list-container {
    display: flex;
    flex-flow: row wrap;
    border: solid rgb(215, 211, 200);
    border-width: 1px 1px 0 0;
    font-family: CircularStd, Arial, Helvetica, sans-serif;
}
.definition-list-term {
    flex-basis: 20%;
    padding: 0.5rem;
    background: rgb(215, 211, 200);
    border-bottom: 1px solid rgb(215, 211, 200);
    border-left: 1px solid rgb(215, 211, 200);
    border-right: 1px solid rgb(215, 211, 200);
    display: flex;
    align-items: center;
}
.definition-list-definition {
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0px;
    padding: 0.5rem;
    border-bottom: 1px solid rgb(215, 211, 200);
}
@media (max-width: 768px) {
  .definition-list-container, .definition-list-term, .definition-list-definition {
    border: 0px;
  }

Example from the Brown React Component Library

Brown React Component Library Code