You need to specify width manually, as input doesn’t react as a div.

Most of the time, absolutely positioned elements that have height and
width set to auto are sized so as to fit their contents

https://developer.mozilla.org/en-US/docs/Web/CSS/position

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: blue;
}

div, input{
  position: absolute;
  left: 20px;
  right: 20px;
  height: 20px;
}

div {
  top: 0;
  background-color: red;
}

input {
  top: 20px;
  background-color: orange;
  width: calc(100% - 40px); /* does not react as a div, need to manually specify width */
  border: 0; /* remove default border */
  padding: 0; /* remove default padding */
}

<div class="wrapper">
  <div></div>
  <input>
</div>

Is there a simple way to let the input grow from left to right like the div in my example do? Why does the input tag (and also button) not work like a div in this case (is the missing </input> the problem for tags like this)?

Example HTML:

<div class="wrapper">
  <div></div>
  <input>
</div>

Example CSS:

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: blue;
}

div {
  position: absolute;
  top: 0;
  left: 20px; /* <-- working */
  right: 20px; /* <-- working */
  height: 20px;
  background-color: red;
}

input {
  position: absolute;
  top: 20px;
  left: 20px; /* <-- isn't working */
  right: 20px; /* <-- isn't working */
  height: 20px;
  background-color: orange;
  border: 0;
}

Example Fiddle