<!-- Контейнер для картинки и текста -->
<div class="flex-container">
<!-- Картинка слева -->
<img src="ваш_сайт/путь_к_картинке.jpg" alt="Описание картинки" class="content-image">
<!-- Текст справа -->
<div class="content-text">
<h2>Заголовок статьи</h2>
<p>Здесь будет ваш текст. Текст статьи, который должен располагаться справа от изображения. Вы можете писать здесь любой объем текста, и он будет аккуратно обтекать или находиться рядом с картинкой в зависимости от стилей.</p>
</div>
</div>
/* Стили для контейнера */
.flex-container {
display: flex; /* Включаем flex-модель */
align-items: flex-start; /* Выравниваем элементы по верхнему краю */
gap: 20px; /* Отступ между картинкой и текстом */
}
/* Стили для изображения */
.content-image {
flex: 0 0 auto; /* Запрещаем картинке сжиматься и расти */
width: 300px; /* Фиксированная ширина картинки */
height: auto; /* Сохраняем пропорции */
border-radius: 8px; /* Скругляем углы, как в вашем стиле */
}
/* Стили для текста */
.content-text {
flex: 1 1 auto; /* Позволяем тексту занимать все оставшееся место */
}