在Flexbox中不允许流体的顶部到底部高度

Question

如何使$100具有自己的高度？现在它在顶部和底部流动。我可以使用'align-item'将其垂直对齐，但是顶部到底部的高度不固定，这不是我想要的。

.wrap {
  display: flex;
  justify-content: space-between;
  border: 1px solid;
}

.middle {
  display: flex;
  align-items: center;
  background: red;
}

<div class="wrap">
  <div>
    <p>
      abc
    </p>
    <p>
      123
    </p>
  </div>
  <div class="middle">
    $100
  </div>
</div>