JSFiddle - React, Tailwind, and code Playground

HTML

<form action="?">
  <select name="grund">
    <option value="A">Grund A</option>
    <option value="B">Grund B</option>
    <option value="C">Grund C</option>
    <option value="0">Anderer Grund</option>
  </select>
  <label class="anderer-grund hide">
    Anderer Grund:
    <input name="AndererGrund" pattern="[a-zA-Z]+">
  </label>
  <button type="submit">Submit</button>
</form>

CSS

.submitted {
  background: green;
}

.hide {
  display: none;
}







form > * {
  display: block;
  margin: 1rem;
}

JavaScript

document.querySelector("[name=grund]").addEventListener("change",function()
{
	const andererGrundLabel = document.querySelector(".anderer-grund")
	const andererGrundInput = document.querySelector("[name=AndererGrund]")
	const selectedOptionValue = this.querySelector("option:checked").value
  if( "0" === selectedOptionValue )
  {
  	andererGrundLabel.classList.remove("hide")
    andererGrundInput.setAttribute("required","")
  }
  else
  {
  	andererGrundLabel.classList.add("hide")
  	andererGrundInput.removeAttribute("required","")
  }
})



document.querySelector("form").addEventListener("submit",function(e)
{
  const me = this
	me.classList.add("submitted")
	e.preventDefault()
  
  window.setTimeout(function()
  {
    me.classList.remove("submitted")
  }, 1000)
})