JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div class="uiComponent">
    <label for="input" class="inputLabel">label</label>
    <i class="fa fa-info-circle"></i>
    <div  class="inputGroup">
        <input type="text" id="input" class="inputField"/> 
    </div>
    <i class="fa fa-chevron-right"></i>       
</div>

CSS

.uiComponent{
    width:100%;
    display:inline-block;    
    box-sizing: border-box;    
    height:50px;
    position:relative;
}
.fa-info-circle{
    width:30px;    
    display:inline-block;    
    box-sizing: border-box;
    position:absolute;
    left:0;
    bottom:13px; 
    text-align:left;    
} 

.fa-chevron-right{
    width:30px;
    display:inline-block;
    box-sizing: border-box;
    position:absolute;    
    right:0;
    bottom:13px;
    text-align:right;
}
.inputGroup{
    width:calc(100%);
    display:inline-block;
    box-sizing: border-box;
    position:absolute;
    left:0px;
    padding-left:30px;
    padding-right:30px;
}
.inputLabel{
    display:block;
    width:100%;    
    box-sizing: border-box;
}

.inputField{
    width:100%;
    display:inline-block;    
    box-sizing: border-box;
}