JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <form action="./" method="post" class="form">
            <div class="formField clearfix">
                <label for="firstName">first name:</label>
                <input type="text" class="formText" id="firstName"/>
            </div>
            <div class="formField clearfix">
                <label for="lastName">last name:</label>
                <input type="text" class="formText" id="lastName" />
            </div>
            <div class="formField clearfix">
                <label for="email">email address:</label>
                <input type="text" class="formText" id="email"/>
            </div>
            <div class="formField clearfix">
                <label for="blog">blog:</label>
                <input type="text" class="formText" id="blog"/>
            </div>
        </form>
    </div>

CSS

.demo {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            margin: 0 auto;
        }
        
        /*=========form style===========*/
        form {
            margin-bottom: 18px;
        }
        
        .formField {
            overflow: auto;
            width: 100%;
            margin: 5px 0;
        }
        
        label {
            float: left;
            display: block;
            margin-right: 5px;
            text-transform: capitalize;
        }
        
        .formText {
            display: block;
            float: left;
        }

JavaScript

$(document).ready(function(){
            var max = 0;
            $('label').each(function(){
                if($(this).width() > max) {
                    max = $(this).width();
                }
            });
            $('label').width(max);
        });