Flexbox line-height/padding spacing issue

Question

Look at this codepen: https://codepen.io/tyrellrummage/pen/zpYgwO

As you can see, as you increase this part:

.left li{
  line-height: 4;
}

the spacing between the flex elements on .right also increase, which is undesired, how can I fix this without floating the items or the .left and .right containers?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  max-width: 85rem;
  margin: 0 auto;
  display: flex;
}

.left li {
  line-height: 4;
}

.left {
  width: 20rem;
  border-right: 1px solid red;
}

.right {
  width: calc(100% - 20rem);
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.top {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #f1f1f1;
}

.item {
  width: calc(25% - 2rem);
  margin: 1rem;
}

.item .bottom {
  padding: 1rem;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

<div class="wrapper">
  <div class="left">
    <ul>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
      <li><a href="#">Testing item</a></li>
    </ul>
  </div>
  <div class="right">
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
    <div class="item">
      <div class="top"></div>
      <div class="bottom">
        <p>item title</p>
        <p>item code</p>
      </div>
    </div>
  </div>
</div>