JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="hint-withIcon clearfix">
    <div class="unknownInput">
        <span>dads</span>
    </div>
    <div class="hintBox">
        <div>?</div>
    </div>
</div>
<div class="hint-withIcon clearfix">
    <div class="unknownInput">
       <input type="text">
    </div>
    <div class="hintBox">
        <div>?</div>
    </div>
</div>  
<div class="hint-withIcon clearfix">
    <div class="unknownInput">
       <textarea></textarea>
    </div>
    <div class="hintBox">
        <div>?</div>
    </div>
</div>      
<div class="hint-withIcon clearfix">
    <div class="unknownInput">
        <span>dads</span>
    </div>
    <div class="hintBox">
        <div>?</div>
    </div>
</div>

CSS

body{
    width:500px;
    padding:20px;
    border-right:1px solid red;
}

.hintBox div{
    color:red;
    border: 1px solid red;
    border-radius:50%;
    width:15px;
    height:15px;
    margin-left:10px;
    text-align:center;
}
.unknownInput, .hintBox{
    float:left;
}
input, textarea{
    width:100%;
    display:block;
}
.clearfix.{
    clear:both;
}
.clearfix:before, .clearfix:after{
    content:"";
    display:table;
    clear:both;
}

JavaScript

$(".hint-withIcon > div :first-child").each(function(){
	if(this.nodeName.toLowerCase() == "input" || this.nodeName.toLowerCase() == "textarea"){
    	this.parentNode.style.width = this.parentNode.parentNode.clientWidth - 27 + "px";
    }
});