JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi porro iure necessitatibus quas neque in nihil quia eaque.</div>

<div class="main">
    <div class="image"></div>
    <div class="image"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et aperiam iste reiciendis soluta totam a cupiditate debitis pariatur blanditiis at ex repudiandae reprehenderit doloremque harum eveniet nisi animi impedit obcaecati!
</div>

CSS

.column {
    float: left;
    width: 100px;
    background: #aaaadd;
}

.main {
    margin-left: 100px;
    width: 300px;
    background: #aaddaa;
}

.image {
    float: left;
    clear: left;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background: red;
    margin: 0 10px 10px;
}

JavaScript

/*Задание — сделать так, чтобы "картинки" (красные блоки) находились в тексте зеленого блока (main) и обтекались текстом справа. Решение внизу этого блока   */
































































































/*Проблема в том, что float-элемент column и блоки, изображающие картинки находятся в одном контексте форматирования и применяя clear:left к картинкам мы тем самым смещаем их под уровень блока column. 
Решение — задать overflow:hidden блоку main. Это создаст новый блочный контекст форматирования для него и float-элемент column перестанет влиять на блоки, изображающие картинки.*/