formの作り方とレスポンシブ化について

Question

図のようにフォームを作り、レスポンシブで中央寄せしたいです。
レスポンシブのformのpaddingの指定はありません。
-レスポンシブ-
form > div {
flex-direction: column;
}
にしましたが、labelも中央寄せされてしまって、labelだけ左寄せできませんでした。
justify-content: flex-start;を指定しても変化なし、
align-items: start;を指定するとinputごと左寄せされてしまいました。
pc版のフォームの作り方から間違っているのでしょうか？

-html-

<form> <div class="form-name"> <label class="name" for="name">お名前</label> <input id="name" type="text"> </div> <div class="form-mail"> <label class="mail" for="mail">メールアドレス</label> <input id="mail" type="email"> </div> </form>

-SCSS-

form {
width: 100%;
padding-left: 60px;
padding-right: 50px;
div {
display: flex;
justify-content: space-between;
align-items: center;
}
}

.input {
position: relative;
&::after {
content: "必須";
color: #fff;
background-color: blue;
text-align: center;
height: 20px;
width: 45px;
line-height: 20px;
position: absolute;
top: 30px;
left: 0;
}
}

Answer 1

質問は、レスポンシブで中央寄せ（モバイルサイズ時）のレイアウトですよね。
質問の画像の下の方のレイアウト。

form {
  width: 100%;
  div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    input {
      width: 90%;
      height: 30px;
    }
    label {
      width: 90%;
      display: flex;
      align-items: center;
      &::after {
        content: "必須";
        color: #fff;
        background-color: blue;
        text-align: center;
        height: 20px;
        width: 45px;
        font-size: small;
        margin-left: 10px;
      }
    }
  }
}

Codepenサンプル