JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<ul class="list b">
    <li class="b">
        <div class="img b">Image</div>
        <div class="middle b">
            <div>Some Text Above</div>
            <div>Some Text Below</div>
        </div>
        <div class="clickable b">
            <a href="#">Clickable Text</a>
        </div>
    </li>
</ul>

CSS

ul.list{widht: 100%; height: 100px;}

ul.list li{width: 100%; height: 100%}
ul.list > li > div{float: left; display block; height: 100%;}

ul.list .img{width: 30%;}
ul.list .middle{width: 30%;}
ul.list .clickable{width: 40%}

.b{outline: 1px solid red;}