JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div id="main">
    <div class="left">
        <div class="leftwrapper"> <div><span>*</span>
            <span>hello this is label may be two line</span></div>

            <div class="leftIcon"><img src="https://wiki.jenkins-ci.org/download/attachments/42469250/info.gif?version=1&modificationDate=1264477127000"/></div>
        </div>
    </div>
    <div class="right">
        <input type="text" />
    </div>
</div>

SCSS

$bg:red;
 $bg1:tomato;
 $bg2:#fff;
 $pad:10px;
 $wd:100%;
 * {
    box-sizing:border-box;
}
#main {
    background:$bg;
    display:inline-block;
    width:$wd;
    height:auto;
    overflow:hidden;
    padding:$pad;
    .left {
        width:$wd - 50;
        float:left;
        .leftwrapper {
            width:$wd;
            padding:$pad;
            background-color:$bg1;
            position:relative;
            text-align:right;
            white-space: nowrap;
            span:first-child {
                color:$bg2;
            }
            div {
                display:inline-block;
                    vertical-align:middle;
                    white-space: normal;
            }
        }
    }
    .right {
        width:$wd - 50;
        display:inline-block;
        background-color:$bg2;
        padding:$pad;
        input[type="text"] {
            width:$wd - 10;
        }
    }
}
@media (min-width:320px) and (max-width:640px){
        #main{
            .left{
            width:$wd;  
        .leftwrapper{text-align:left;}
            }
             .right{
            width:$wd;    
            }
        }
}