List Component

<div class="spr-container">
  <div class="spr-lst-title">
    <strong>February 2019 Transactions</strong>
  </div>
  <div class="spr-lst-items">
    <div class="spr-lst-item">
      <div class="spr-lst-item-column-left">
        <div class="spr-lst-item-title">SQ *FAMILIARS cafe</div>
        <div class="spr-lst-item-desc">Repair & Maintenance</div>
        <div class="spr-lst-item-desc">Pending</div>
      </div>
      <div class="spr-lst-item-column-right">
        <strong>$8.79</strong>
        <div class="spr-lst-item-desc">Oct 7, 2019</div>
      </div>
    </div>
    <div class="spr-lst-item">
      <div class="spr-lst-item-column-left">
        <div class="spr-lst-item-title">SQ *thousand hills coffee</div>
        <div class="spr-lst-item-desc">Restaurant</div>
      </div>
      <div class="spr-lst-item-column-right">
        <strong>$3.00</strong>
      </div>
    </div>
    <div class="spr-lst-item">
      <div class="spr-lst-item-column-left">
        <div class="spr-lst-item-title">Card Payment</div>
        <div class="spr-lst-item-desc">Payment</div>
      </div>
      <div class="spr-lst-item-column-right">
        <strong>-$5432.34</strong>
        <div class="spr-lst-item-desc">Oct 7, 2019</div>
      </div>
    </div>
  </div>
</div>

@import 'components/list';

@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-lst-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0;
  font-weight: 600;
  padding: 1.5rem 1rem;
  background-color: #f7f7f8;
}

.spr-lst-title > :not(:last-child) {
  margin-right: 0rem;
}

@media only screen and (max-width: 37.49rem) {
  .spr-lst-title {
    padding-top: 2rem;
  }
}

.spr-lst-items {
  display: flex;
  flex-direction: column;
}

.spr-lst-items > space-between:not(:last-of-type) {
  margin-bottom: 0rem;
}

.spr-lst-item {
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 400;
  padding: 1rem 1rem;
  box-shadow: 0 1px 0 0 #e4e5e7;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.spr-lst-item > :not(:last-child) {
  margin-right: 0rem;
}

.spr-lst-item-column-left .spr-lst-item-desc, .spr-lst-item-column-right .spr-lst-item-desc {
  color: #6b6f7b;
}

.spr-lst-item-column-right {
  text-align: right;
}

.spr-lst-item-column-left {
  text-align: left;
}