Выровняйте элементы в css

Question

В настоящее время, когда у меня окно в полную ширину, мои элементы выглядят так:

Когда я уменьшаю окно, кнопка «Отправить» перемещается вверх.

Как бы я мог установить его, чтобы он оставался равномерно центрированным?

Вот мой код:

<form>
  <div className="row">
    <div className="col-sm-3">
      <label>
        Name:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <label>
        Phone:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <label>
        Email:
        <input type="text" name="name" />
      </label>
    </div>
    <div className="col-sm-3">
      <input type="submit" value="Submit" />
    </div>
  </div>
</form>

Это компонент реагирования, который вот почему это className.

Answer 1

либо ...

1. Flex Box и justify-content: space-between;

2. Css сетки и grid-template-columns: repeat(4, 1fr);