Блог

У меня есть сетка с кучей элементов. Один из элементов содержит изображение и некоторый текст. Я хочу поместить текст рядом с изображением, но не могу заставить его работать…

Смотрите код ниже:

 <div id="blog-post-item" class="blog-post">
    <h1>Some amazing blogpost title about something super cool!</h1>
    <div class="blog-post-content">
        <div class="content-flex-container clearfix">
            <img src="Data/Content/food_post5.jpg">
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, repellendus natus! Corporis, architecto laboriosam natus doloremque corrupti sunt a incidunt! Eligendi soluta beatae neque reprehenderit ipsa perspiciatis architecto accusantium incidunt.</p>
        </div>
    </div>
</div>
 

 body {
    display: grid;
    background: tomato;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(max-content, max-content);
    column-gap: 20px;
    row-gap: 20px;
}

.blog-post {
    background: #fff;
    border: 5px solid #fff;
    border-radius: 10px;
    display: grid;
    grid-template-rows: minmax(auto, max-content) 1fr;
    height: 100%;
    grid-column: 2/-1;
    width: 100%;
}

.blog-post h1 {
    grid-row: 1;
    grid-column: 1/-1;
}

.blog-post-content {
    grid-row: 2;
}

.content-flex-container {
    height: 100%;
    width: 100%;
    display: block;
}

.content-flex-container img {
    height: 100%;
    float: left;
}

.content-flex-container p {
    float: left;
}
 

Но это результат, который я получаю:

как вы можете видеть, текст находится под изображением, а не справа от изображения в большом белом открытом пространстве..

Если требуется дополнительная информация, пожалуйста, дайте мне знать, чтобы я мог уточнить.