沿图像垂直对齐div

https://codepen.io/anon/pen/gdwLGm

HTML格式:

<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x100"></span>
          <div class="product-details">
            <div class="name-header">This is a very long test name</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">open</a></span>
            </div>
          </div>
        </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
          <hr>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>  

CSS格式:

.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 101;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shopping-cart-body {
    font-family: 'IBMPlexSerif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    margin-top: 20px;
    margin-left: 20px;
    font-size: 30px;
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans';
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
    margin-left: 20px;
    margin-right: 10px;
}

.product img {
    width: 100%;
    height: auto;
}


.name-header{
        text-align: left;
    }

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: absolute;
    width: 50%;
    float: left;
}


.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    top: 80%;
    height: 100%;
    width: 100%;
    background: white;
}

.product-quantity-details .quantity{
    float: left;
    text-align: center;
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 33px;
    color: black;
}

.cart-preview .product{
    margin-top: 10px;
}

.product-quantity-details .quantity:after{
    content: 'x'
}


.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    border: none;
    color: white;
    top: 13%;
    line-height: 14px;
    bottom: 50px;
    height: 40px;
    width: 205px;
    left: 25%;
}

.checkout .taxes{
    position: absolute;
    width: 100%;
    top: 5%;
}

.checkout .cart-total{
    position: absolute;
    width: 100%;
    top: 10%;
    float: left;
}

.cart-total .value {
    margin-right: 20px;
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    margin-left: 20px;
    float: left;
}


.taxes .value {
    margin-right: 20px;
    float: right;
}

.taxes .label {
    margin-left: 20px;
    float: left;
}

.taxes>hr{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    border-color: black;
}

.product-quantity-details{
    align-items: center;
    display: inline-flex;
}
.product-details{
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

#blockcart-modal {
    position: fixed;
    background-color: hsla(0, 0%, 100%, .1);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center
}

#blockcart-modal > div {
    padding: 20px;
    display: inline-block;
    min-width: 50%;
    min-height: 400px;
    margin-top: 200px;
    text-align: left;
    background-color: #fff;
    z-index: 100;
    border: 1px solid #ccc
}

JavaScript(只包含一个函数):

function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
} 

name-header product-quantity-details 应该是“一半”的价格(和班级分开) price-open
我试过的:我试过用 position: absolute; top:0; 至于名字, bottom:0; top: 50%; 数量详情。这真的不管用。