JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <article class="good">
        <img src="none"></img>
        <p>Few short words float and wrap nicely after the image</p>
    </article>
    <article class="bad">
        <img src="none"></img>
        <p>Longlonglonglonglongwords wrap but don't float</p>
    </article>
    <article class="bad">
        <img src="none"></img>
        <p>After short longlonglonglonglongwords sink too</p>
    </article>
</section>

CSS

* {
    padding:0;
    margin:0;
    padding:0;
    box-sizing: border-box;
}
section {
    background-color: #ccc;
    padding: 12px;
    margin:40px;
}
article {
    display: inline-block;
    padding:12px;
    margin:2px;
    width:160px;
    height:160px;
    background-color:#eee;
    word-wrap: break-word;
    overflow: hidden;
}
.good {
    background-color: #cfc;
}
.bad {
    background-color: #fcc;
}
img {
    width:38px;
    padding:4px;
    float:left
}
p {
    background-color: #ccf;
}