<ul class="list-group">
  <li>Item One
    <span class="badge">2</span>
  </li>
  <li>Item Two
    <span class="badge">11</span>
  </li>
  <li>Item Three
    <span class="badge">4</span>
  </li>
  <li>Item Four
    <span class="badge">5</span>
  </li>
</ul>
body {
  max-width: 900px;
  margin: 0 auto;
  padding: 2em;
  font: 125% "Open sans", sans-serif;
}

.list-group {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  width: 20em;
}
.list-group li {
  border-top: 1px solid #ccc;
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-group li:first-child {
  border-top: 0;
}
.list-group .badge {
  background-color: rgb(71, 73, 84);
  color: #fff;
  font-weight: bold;
  font-size: 80%;
  border-radius: 10em;
  min-width: 1.5em;
  padding: 0.25em;
  text-align: center;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans|Proza+Libre&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.