Какой CSS будет правильно отображать формат html [закрыто] ⇐ CSS

[Anonymous]

Мой вывод в формате HTML должен быть следующим:

• изображение должно быть слева
• описание справа
• описание справа li>
  мета в правом нижнем углу под описанием.
  Кроме того, изображение должно занимать 30 % от общей ширины, а высота изображения должна совпадать с шириной изображения.< /li>

Ширина и высота изображения всегда должны быть одинаковыми, но я застрял. Посоветуйте, что мне попробовать дальше?

Lorem ipsum title


/>



In publishing and graphic design, Lorem ipsum is a
placeholder text commonly used to
demonstrate the visual form of a document or a typeface
without relying on
meaningful content. Lorem ipsum may be used as a
placeholder before final copy is
available.

Published: 12/12/2012 | Views: 22




Приведенный ниже CSS я попробовал
.title {
text-align: center;
}
.outer-parent {
display: flex;
justify-content: space-between;
}
.text-parent {
display: flex;
flex-direction: column;
width: 70%;
margin-left: 1%;
}
.image-parent {
max-width: 30%;
height: auto;
}
.text-parent span:nth-of-type(2) {
align-self: flex-end;
}

.text-parent span:nth-of-type(1) {
flex-grow: 2;
}


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