Create a flexible div with gold background list items, each with a purple background, and apply margin and bottom margin based on class.

HTML

<div>
  <ul class="lobotomized-owl">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <ul class="pseudo-classes">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

CSS

div {
  display: flex;
}
ul {
  background-color: gold;
  flex-grow: 1;
}
li {
  background-color: rebeccapurple;
}

.lobotomized-owl > * + * { margin-top: 1rem }
.pseudo-classes > :not(:last-child) { margin-bottom: 1rem; }