在2列之间显示购物车项目

<div class="cart">
  <div class="cart-items">
    <div class="item">
      <img src="product1.jpg" alt="Product 1">
      <div class="item-details">
        <h3>Product 1</h3>
        <p>Price: $10</p>
        <p>Quantity: 2</p>
      </div>
    </div>
    <div class="item">
      <img src="product2.jpg" alt="Product 2">
      <div class="item-details">
        <h3>Product 2</h3>
        <p>Price: $15</p>
        <p>Quantity: 1</p>
      </div>
    </div>
  </div>
  <div class="cart-summary">
    <p>Total Items: 3</p>
    <p>Total Price: $35</p>
  </div>
</div>

.cart {
  display: flex;
  justify-content: space-between;
}

.cart-items {
  width: 60%;
}

.item {
  display: flex;
  margin-bottom: 10px;
}

.item img {
  width: 100px;
  height: 100px;
}

.item-details {
  margin-left: 10px;
}

.cart-summary {
  width: 30%;
  text-align: right;
}