JSFiddle - React, Tailwind, and code Playground
by Boba Poshtar
HTML
<div class="box1"><img src="" alt=""><span>test</span></div>
<div class="box2"><img src="" alt=""><span>test</span></div>
<div class="box3"><img src="" alt=""><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatibus, accusantium sit, rerum exercitationem perspiciatis fuga minus consequatur aliquid cumque, cum praesentium omnis iste quaerat! Nesciunt nemo fugiat deserunt tenetur.</span></div>CSS
img { width: 64px; height: 64px; background: yellow;}
span { border: 1px solid red;}
div { margin: 0 auto 24px; padding: 8px; width: 300px; border: 1px solid green;}
.box3 { width: auto;}
.box1:after { content: ''; display: block; clear: both;}
.box1 img { float: left;}
.box1 span { float: right;}
.box2 { display: flex; justify-content: space-between; align-items: flex-start;}
.box3:after { content: ''; display: block; clear: both;}
.box3 img { float: left; }
.box3 span { display: block; margin-left: 72px;}