Synthese: das Kontaktformular

<p class="etikett">daneben</p>
<div class="feld feld--daneben">
  <label for="a">Deine E-Mail-Adresse</label>
  <input type="email" id="a">
</div>

<p class="etikett">darüber</p>
<div class="feld feld--drueber">
  <label for="b">Deine E-Mail-Adresse</label>
  <input type="email" id="b">
</div>

<p class="hinweis">
  Schon auf dieser Breite bleibt oben für das Feld
  kaum etwas übrig, denn das Label behält seine
  Breite. Unten passiert nichts, weil beide die volle
  Breite für sich haben. Noch schmaler wird es im
  Vollbild über die Leiste mit den Gerätebreiten.
</p>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.etikett {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #52525b;
}

.feld {
  margin-bottom: 32px;
}

.feld--daneben {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.feld--drueber {
  display: grid;
  gap: 4px;
}

input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  font: inherit;
}

.hinweis {
  max-width: 60ch;
  color: #52525b;
}

<form class="formular">
  <div class="feld"><label>Name</label><input type="text"></div>
  <div class="feld"><label>E-Mail</label><input type="email"></div>
  <div class="feld feld--breit"><label>Nachricht</label><textarea rows="3"></textarea></div>
</form>

<p class="hinweis">
  Name und E-Mail sind kurz und teilen sich eine Zeile.
  Die Nachricht geht über beide Spalten, weil ein
  halbbreites Textfeld niemandem hilft. Zwei Spalten
  sind es hier bei jeder Breite, nur schmalere; das
  Umschalten auf eine Spalte kommt erst in der
  Aufgabe. Wie es mit Luft aussieht, siehst du, wenn
  du ins Vollbild gehst.
</p>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 640px;
}

.feld {
  display: grid;
  gap: 4px;
}

.feld--breit {
  grid-column: span 2;
}

label {
  font-size: 14px;
  color: #3f3f46;
}

input,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}

.hinweis {
  max-width: 60ch;
  margin-top: 24px;
  color: #52525b;
}

<div class="aktionen">
  <button class="knopf knopf--sekundaer" type="button">Abbrechen</button>
  <button class="knopf knopf--primaer" type="button">Absenden</button>
</div>

<p class="hinweis">
  Wird der Platz zu eng, rutscht der zweite Knopf in
  eine neue Zeile, statt dass beide zusammengedrückt
  werden. Die Voreinstellung Handy ist dafür noch zu
  breit: trag in der Leiste darüber eine Breite von
  Hand ein, etwa 280.
</p>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.knopf {
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid #2563eb;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.knopf--primaer {
  color: #ffffff;
  background-color: #2563eb;
}

.knopf--sekundaer {
  color: #1d4ed8;
  background-color: transparent;
}

.hinweis {
  max-width: 60ch;
  margin-top: 24px;
  color: #52525b;
}