<div class="group">
  <!-- an ordered list -->
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>

  <!-- an unordered list -->
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>

  <!-- an interactive unordered list -->
  <menu>
    <li><button>Button 1</button></li>
    <li><button>Button 2</button></li>
    <li><button>Button 3</button></li>
  </menu>
</div>

<div class="group">
  <p>Types of lists:</p>

  <dl>
    <dt>Ordered List</dt>
    <dd>A list where the order of the items matters, indicated by a numeric marker.</dd>
    <dt>Unordered List</dt>
    <dd>A list where the order items doesn't really matter and is indicated with a bullet marker. </dd>
    <dt>Menu List</dt>
    <dd>Same sorta deal as an unordered list, but more of a semantic way to list interactive items, like buttons.</dd>
    <dt>Description List</dt>
    <dd>Oh, and this is a description list.</dd>
  </dl>
</div>

body {
  padding: 3rem;
}

.group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  place-items: center;
}

.group:nth-child(2) {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}