Html, textfelder Nebeneinander, Mittig, verschiedene größen und Text funtkioniert nicht?

Ich versuche gerade in Html 2 Textfelder Nebeneindaer zu bekommen das Rechte soll ein Bild haben, In das Linke Text.

Der Code: https://pastebin.com/qScdL5Vs

Die Bilder:

Wenn ich Wenig Reinschreibe:

Wenn ich nichts Reinschreibe:

Wenn ich viel Reinschreibe:

Ich würde mich Wirklich über Hilfe Freuen. Danke :)

Answer 1

[regex9]

Du brauchst deine Boxen nicht in der display-Eigenschaft zu ändern, damit sie nebeneinander gerückt werden (lasse diese Properties also für beide Kästen weg). Die Positionierung kann eine Flexbox für dich übernehmen:

.box {
  display: flex;
  /* ... */
}

oder ein Grid (bei dem auch gleich die Spaltenbreiten definiert werden):

.box {
  display: grid;
  grid-template-columns: 75% 25%;
  /* ... */
}

Für den horizontalen Abstand zwischen den Elementen gibt es das column-gap-Property.