JSFiddle - React, Tailwind, and code Playground

HTML

<div class="comment">
    <div class="img"><div class="inner">img</div></div>
    <p>This is the comment</p>
</div>
<div class="comment">
    <div class="img"><div class="inner">img</div></div>
    <p>Long comment. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.comment {
    background-color: #000;
    border-radius: 20px;
    color: #fff;
    /*clear: left;*/
    overflow: auto;
    margin-bottom: 10px;
    padding: 20px 20px 0;
}
.comment .img {
    background-color: #fff;
    border-radius: 0 60px 60px 0;
    border: 5px solid #fff;
    display: block;
    float: left;
    margin: -20px 20px 0 -20px;
}
.comment .img .inner {
    background: #000;
    border-radius: 60px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
.comment p {
    padding-bottom: 20px;
}