JSFiddle - React, Tailwind, and code Playground

by roeburg

HTML

<div class="filedContainer">
    <span class="label">
        User Name Is Much longer Than One line So it will Wrap To 2 lines
    </span>
    <span class="editor">
        <input type="text" />
    </span>
</div>

CSS

.filedContainer{
    width: 400px;    
    margin-left: auto;
    margin-right:auto;
}
.filedContainer .label{
    float: left;
    padding: 5px;
    min-width: 140px;    
}
.filedContainer .editor{
    float: left;
    width: 240px;  
    padding: 5px;
}
.filedContainer .editor input{    
    width: 100%;
}

JavaScript

$(function (){
    var allFiledContainer = $(".filedContainer");
    if(allFiledContainer && allFiledContainer.length > 0){
        var filedContainerWidth = $(".filedContainer").width();
        
        $.each(allFiledContainer, function (index, element) {
            if(element && $(element) && $(element).length > 0){
                var label = $(element).find(".label");                
                var editor = $(element).find(".editor");
                
                if($(label) && $(label).length > 0 && $(editor) && $(editor).length > 0){
                    // Check if lable's width + Editor's width + padding is > filed container's width   
                    var labelWidth = $(label).width();
                    var editorWidth = $(editor).width();
                    var paddingSetting = 20;
                    if(filedContainerWidth < (labelWidth + editorWidth + paddingSetting)){
                        // Set the editor width to the  filedContainerWidth
                        $(editor).width(filedContainerWidth - paddingSetting);
                    }
                }
            }
        });
    }    
})