Как пропустить изображение в верхнюю правую сторону в гибком контейнере? ⇐ Html

[Anonymous]

Я пытаюсь создать раздел заголовка, используя некоторую общую информацию о компании, наряду с логотипом компании в качестве изображения. 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>
Поскольку содержимое слева может различаться по длине, и я хочу, чтобы оно было отзывчивым в разных размерах экрана, я бы хотел, чтобы изображение было пропадано в верхней правой. На более узких экранах я также хочу иметь возможность использовать пространство под логотипом для контента. Как лучше всего этого добиться? Для каждой ширины контейнера. Поскольку слева много элементов, я надеюсь на более простое решение.
Заранее!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -container