css - cant float two items inside of a grid element

Question

I have a grid with a bunch of items. One of the items contains an image and some text. I want to float the text next to the image but can't get it to work...

See code below:

<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;
}

But this is the result i get:

as you can see the text is below the image not to the right of the image in the big white open space..

If more information is needed please let me know so i can clarify.

Answer 1

等待大神答复