Wie fahre ich ein Bild in die oberste rechte Seite in einem Flex-Behälter? ⇐ CSS

[Anonymous]

Ich versuche, einen Header-Abschnitt mit einigen allgemeinen Informationen über ein Unternehmen zusammen mit dem Logo des Unternehmens als Bild zu erstellen. https://jsfiddle.net/qvjae2OS/


">">.tag {
font-size: 12px;
padding: 1px 4px;
border-radius: 5px;
background-color: lightblue;
}

.tag-list {
display: flex;
column-gap: 8px;
row-gap: 4px;
flex-wrap: wrap;
}

.content-and-img {
display: flex;
align-items: start;
}

img {
width:150px;
object-fit: contain;
}< /code>






XXXXX
...

There is a title here
...




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...

Some shorter Text


Tag1
Tag2
Tag3
Tag4
Tag5
Tag6
Tag7
Tag8
Tag9
Tag10






< /code>
< /div>
< /div>
< /p>
Da der Inhalt links eine Länge variieren kann und ich möchte, dass es über verschiedene Bildschirmgrößen hinweg reagiert, möchte ich, dass das Bild nach oben rechts schwebt. Auf schmaleren Bildschirmen möchte ich auch in der Lage sein, den Raum unter dem Logo für den Inhalt zu nutzen. Was ist der beste Weg, um das zu erreichen? Grid-Template-Areas für jede Containerbreite. Da es links viele Elemente gibt, hoffe ich auf eine einfachere Lösung.
Danke im Voraus!