Необходимо выровнять правые дочерние элементы div с помощью css

Question

У меня есть родительский div, содержащий 2 div.Один выровнен по левому краю, а другой - по правому краю.Таким образом, каждый содержит дочерние элементы.

.card-middle-row  {
  
}
.card-middle-row .container-right {
  float: right;
  margin-right: 12px;
  line-height: 20px;
  color: #727272;
  font-size: 12px;
}
.card-middle-row .container-left {
  float: left;
  margin-left: 12px;
  line-height: 20px;
  color: #727272;
  font-size: 12px;
}
.card-middle-row .container-left span {
  color: #212121;
  font-size: 20px;
}
.card-middle-row .container-right span {
  color: #212121;
  font-size: 20px;
}
.card-middle-row > div {
  margin-top: 10px;
  line-height: 20px;
}

<div class="card-middle-row">
    <div class="container-left">
      <div>Quantity</div>
      <div>
        <span>Cancelqty</span> Out of 100
      </div>
    </div>
    <div class="container-right">
      <div>Price</div>
      <div><span>order</span></div>
  </div>
</div>

Таким образом, проблема в том, что div container-right содержит дочерние элементы.Из-за тега <span> два дочерних элемента не выровнены правильно.

Answer 1

Я бы использовал Display Flex, чтобы держать все в порядке.

.container-right{
display:flex;
align-items:center;
justify-content:center;
}

Answer 2

Добавьте text-align:right к вашему .container-right селектору.Попробуйте это.

.card-middle-row .container-right {
  float: right;
  margin-right: 12px;
  line-height: 20px;
  color: #727272;
  font-size: 12px;
  text-align: right;
}