Text not aligned at the bottom of the container-CodePudding

In this example, the price text is aligned at the top of the container, I want it to be aligned at the bottom of it, like at the baseline

.options {
    margin-top: auto;
    background: #ffaaff;
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    line-height: 1;
}

.money {
  display: block;
}

.cart-price {
  display: block;
}

<div >
  <div >
    <span >
      <span >$49.50</span>
    </span>
  </div>
  <div>
    <button>Decrease</button>
    <span >2</span>

  </div>
</div>

CodePudding user response：

You can fix it by adding display: flex and align-items: end to the .price div. Read more about flexbox (and align-items) at MDN.

.price {
    display: flex;
    align-items: end;
}

.options {
  margin-top: auto;
  background: #ffaaff;
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  line-height: 1;
}

.money {
  display: block;
}

.cart-price {
  display: block;
}

.price {
  display: flex;
  align-items: end;
}

<div >
  <div >
    <span >
      <span >$49.50</span>
    </span>
  </div>
  <div>
    <button>Decrease</button>
    <span>2</span>

  </div>
</div>

CodePudding user response：

The price class should have

align-self: flex-end;

which will align the div with price class vertically at the end of the flex.