JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<div>
    <div class="recipe-item">
        <img src="http://www.valio.fi/mediafiles/626e1f43-0132-43b6-800a-913e6573bf4e/610x410"></img>
        <div class="stars">*****</div>
        <div class="comments">6</div>
    </div>
    <div class="recipe-item"></div>
</div>

CSS

.recipe-item {
    position: relative;
    border: 1px solid red;
    
    img {
        position: relative;
        width: 100%;
    }
    
    .stars {
        display: inline-block;
        width: 100px;
        position: absolute;
        bottom: 0px;
    }
    
    .comments {
        display: inline-block;
        position: absolute;
        bottom: 0px;
        right: 0;
    }
}