'Text not aligned at the bottom of the container

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 class="options">
  <div class="price">
    <span class="cart-price">
      <span class="money">$49.50</span>
    </span>
  </div>
  <div>
    <button>Decrease</button>
    <span >2</span>

  </div>
</div>
htmlcss


Solution 1:[1]

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 class="options">
  <div class="price">
    <span class="cart-price">
      <span class="money">$49.50</span>
    </span>
  </div>
  <div>
    <button>Decrease</button>
    <span>2</span>

  </div>
</div>

Solution 2:[2]

The price class should have

align-self: flex-end;

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roy
Solution 2 Han Moe Htet

Related Questions