Почему мои элементы формы не соответствуют моему сеточному макету и отображаются так, как если бы они были элементом блоков

Question

Я работаю с сеткой CSS, и мои элементы формы не соответствуют соглашению о сетке.

Я не могу понять, почему это не удается, так как я следовал требованиям к сетке и убедился, что форма сама является сеткой с двумя столбцами внутри, один для ввода, другой для кнопки отправки.

Так что мне кажется, что они должны отображаться как встроенные элементы.

Демонстрация здесь

здесь мой фрагмент кода activ.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";

class App extends Component {
  state = {
    name: "",
    email: ""
  };

  onChange = e => {
    console.log("e.target.name: ", e.target.name);
    this.setState({ [e.target.name]: e.target.value });
  };

  sendForm = e => {
    e.preventDefault();
    console.log("form sent: ", this.state.name, this.state.email);
  };

  render() {
    return (
      <div className={style.newsletter_grid}>
        <h2 className={style.newsletter_headline}> newsletter headline</h2>

        <form className={style.newsletter_form} onSubmit={this.sendForm}>
          <div className={style.newsletter_input}>
            <input
              onChange={this.onChange}
              name="name"
              type="text"
              value={this.state.name}
              placeholder="name"
            />
            <input
              onChange={this.onChange}
              name="email"
              type="text"
              value={this.state.email}
              placeholder="email"
            />
          </div>

          <button type="submit" className={style.newsletter_conversion}>
            confirmer
          </button>
        </form>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

Мой фрагмент кода activ.css:

.newsletter_grid {
  display: grid;
  width: 100%;
  grid-template-areas:
    "headline headline"
    "form     form";
}

.newsletter_headline {
  grid-area: headline;
}

.form {
  grid-area: form;
  display: grid;
  grid-template-areas: "newsletter_input           newsletter_conversion";
}

.newsletter_input {
  grid-area: newsletter_input;
}

.newsletter_conversion {
  grid-area: newsletter_conversion;
}

Если у кого-то есть подсказка, было бы здорово.Благодарю.