How do I get the button on the same line as the input. See image...

[gilded palm]

Probably a css error of mine. Can someone help me out? 🙂

.form-container > form {
  display: flex;
  justify-content: center;
}

.input-container {
  max-width: 240px;
}

.form-container label.text {
  font-size: 0.75rem;
  color: #ab1313;
  font-weight: 700;
  position: relative;
  top: 0.5rem;
  margin: 0 0 0 7px;
  padding: 0 3px;
  background: white;
  width: fit-content;
}

.form-container input[type=text].input {
  padding: 10px 10px;
  font-size: 0.75rem;
  border: 2px #ab1313 solid;
  border-radius: 5px;
  background: transparent;
}

.form-container input[type=text].input:focus {
  outline: none;
}

form button {
  padding: 2px 15px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #ab1313;
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #ab1313;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #ab1313;
  height: 50px;
}

form button:hover {
  color: white;
  box-shadow: inset 0 -100px 0 0 #ab1313;
}

form button:active {
  transform: scale(0.9);
}

return (
        <div className='form-container'>
            <form action="get" onSubmit={handleSubmit}>
                <div className='input-container'>
                    <label htmlFor="input" className='text'>Pokemon:</label>
                    <input
                        type="text"
                        placeholder="Write here..."
                        name="pokemon"
                        className='input'
                        value={valueInput.replace(/-/g, " ")}
                        onChange={handleChange} />
                </div>
                <button
                    className="form--button"
                    type="submit"
                    onClick={handleClick}
                >
                    Suchen
                </button>
            </form>
        </div>
    );

[stark cave]

What if you add margin-top: auto to the button?

[candid bone]

You put align-items: center on .form-container ?

[subtle oak]

You can remove the outer div and just use the container class on the form element.