Create a responsive form layout

HTML

<main>
<form class="aufgabe" name="aufgabe_1">
  <h2>Aufgabe 1</h2>
  <p class="text">Auf gaben text Auf gaben text Auf gaben text Auf gaben text Auf gaben text
    Auf gaben text Auf gaben text Auf gaben text Auf gaben text</p>
  <label class="versuch">
    Ihr Versuch:
    <input type="text" name="versuch_1">
  </label>
  <button name="verify">Prüfen</button>
  <a href="...">Lösung</a>
</form>
<form class="aufgabe" name="aufgabe_2">
  <h2>Aufgabe 2</h2>
  <p class="text">Auf gaben text Auf gaben text Auf gaben text Auf gaben text Auf gaben text
    Auf gaben text Auf gaben text Auf gaben text Auf gaben text</p>
  <label class="versuch">
    Ihr Versuch:
    <input type="text" name="versuch_2">
  </label>
  <button name="verify">Prüfen</button>
  <a href="...">Lösung</a>
</form>
</main>

CSS

body {
  max-width: 50em;
  margin: 0 auto;
  padding: 0 6px;
}
.aufgabe {
   margin: 1em 0;
   display: grid;
   grid: "h2  h2 " auto 
         "text text" auto
         "vers vers" auto
         "prüf lsng" auto
       /  1fr auto;
   gap: 0.3em;
}
.aufgabe h2 {
   grid-area: h2;
   font: bold 1rem sans-serif;
   margin: 0;
}
.aufgabe .text {
   grid-area: text;
   margin: 0;
}
.aufgabe .versuch {
   grid-area: vers;
   text-align: right;
}
.aufgabe input {
   width: 6em;
}
.aufgabe button {
   grid-area: prüf;
   justify-self: end;
}
.aufgabe a {
   grid-area: lsng;
}
.aufgabe :is(button, a) {
   display: inline-block;
   box-sizing: border-box;
   font-size: 0.9em;;
   width: 4.5em;
   font-family: sans-serif;
   padding: 2px;
   background-color: ButtonFace;
   border: thin solid ButtonText;
   border-radius: 3px;
   text-align: center;
   color: ButtonText;
}
@media (width > 21em) {
   .aufgabe {
      grid: "h2   h2   h2 " auto 
            "text text text" auto
            "vers prüf lsng" auto
          /  1fr auto auto;
   }
}