divを四方に4つ並べ、右揃えで下にdivを追加したい。

Question

<div class="con-box">
  <div class="con-child-box">
    <label>テスト1</label>
    <textarea>1</textarea>
  </div>
  <div class="con-child-box">
    <label>テスト2</label>
    <textarea>2</textarea>
  </div>
  <div class="con-child-box">
    <label>テスト3</label>
    <textarea>3</textarea>
  </div>
  <div class="con-child-box">
    <label>テスト4</label>
    <textarea>4</textarea>
  </div>

  <!-- 追加 -->
  <div class="con-child-box">
    <label>テスト5</label>
    <input type="text" value="5">
  </div>
</div>

.con-box {
    align-content: space-between;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 1500px;
}
.con-child-box{
    align-items: center;
    display: inline-flex;
    margin: 10px 3% 10px 0;
    width: 600px;
}
.con-child-box > label {
    width: 20%;
}
.con-child-box > textarea {
    width: 480px
}
/** 追加 **/
.con-box >:last-child {
    margin-left: auto;
}

textareaが4つあり、それぞれをdivで囲い、画面中央へ四方に並べることはできました。
新たにinputを下に配置したいが、inputの右辺が上の右側のdiv達の右辺に揃いません。
また、画面を縮めた際も4div達は縦に揃うようになっていますが、inputも揃うようにしたいです。

flexの扱いがいまいちで、ご教授いただきたいです。
inputを上のdiv達の右辺に合わせれればいいので、flexでなくても実現できればいいです。

上が通常時
下が幅を縮めた時