JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<html>
    <body>
        <div class="external">
            <div class="field">
                <div class="label">Label</div>
                <div class="input"><input type="text"/></div>
            </div>
            <div class="field">
                <div class="label">Label</div>
                <div class="input"><input type="text"/></div>
            </div>
            <div class="field">
                <div class="label">Label longer than normal will wrap</div>
                <div class="input"><input type="text"/></div>
            </div>
            <div class="field">
                <div class="label">Label</div>
                <div class="input">
                    <input type="text"/>
                    plus some text here
                </div>
            </div>
            <div class="field">
                <div class="label">Label</div>
                <div class="input"><input type="text"/></div>
            </div>
        </div>
    </body>
</html>

CSS

div {
    border: 1px solid red;
    margin: 2px; 
    padding: 2px; 
}

.field {
    clear: both;
}

.label {
    float: left;
    width: 100px;  
    border: 1px solid blue;
    background: #EEEEFF;
}

.input {
    border: 1px solid green;
    background: #EEFFEE;  
    overflow-x: auto;
}

input {
    width: 99%;
}