Поместите последнего ребенка рядом с предыдущим - Flexbox

Question

Учитывая приведенный ниже пример, как я могу поместить последнего потомка (CVV) рядом с предыдущим одним (Expiry), чтобы они были на одном и том же ряд :

.form-col-1--cc {
  display: flex;
  flex: 30%;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
}

<div class="form-col-1--cc">
  <input matInput required class="example-full-width" name="number" card-number>
  <input required name="first-name" card-name matInput>
  <input matInput required name="expiry" card-expiry placeholder="Expiry">
  <input matInput required name="cvv" card-cvc placeholder="CVV">
</div>

Answer 1

Просто оберните ваши входные данные в другой div, например:

.form-col-1--cc {
  display: flex;
  flex: 30%;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
}

<div class="form-col-1--cc">              
  <input matInput required class="example-full-width" name="number" card-number>
  <input type="text" required name="first-name" card-name matInput>
  <div>
    <input matInput required type="text" name="expiry" card-expiry placeholder="Expiry">
    <input matInput required type="text" name="cvc" card-cvc placeholder="CVV">
  </div>
</div>