JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row class_1">  
    <div class="col-sm-6 col-md-4">
        <img class="img-class">
        
    </div>
    <div class="col-sm-6 col-md-4 class_2 ">
        <span>text</span>
        <span>text</span>
    </div>
    <div class=" class_2 class_3 col-sm-6 col-md-4">
        <span>text</span>
    </div>
</div>

SCSS

.class_1{
    
    padding:20px;

    .img-class{
        width:220px;
        height:auto;
    }

    .class_2{
        text-align:center;
        display: flex;
        justify-content:space-between;
        align-content: flex-end;
        flex-wrap: wrap;
        font-size: 15px;
        flex-direction: row;
        font-family: 'Open Sans', sans-serif;
    }
    .class_3{
        font-size: 19px;
        justify-content:flex-end;
    }   
}