JSFiddle - React, Tailwind, and code Playground

by Mohsen Safari Roodbar

HTML

<form id="table" action="AddItems" method="post">
            <div class="box">
                <span class="label"> Item Name</span>
                <span class="ib"> <input type="text" name="item_name" id="item_name"/></span>
            </div>
            <div class="box">
                <span class="label">Item Id </span>
                <span class="ib"> <input type="text" name="item_id" id="item_id"/>
                </span>
            </div>
            <div class="box">
                <span class="label">Color  </span>
                <span class="ib"><input type="text" name="item_color" id="item_color"/></span>
            </div>
            <div class="box">
                <span class="label">Size</span>
                <span class="ib">  <input type="text" name="item_size" id="item_size"/></span>
            </div>
            <div class="box">
                <span class="label">Supplier </span>
                <span class="ib"><input type="text" name="item_supplier" id="item_supplier"/></span>
            </div>
            <div class="box">
                <span class="label">Quantity </span>
                <span class="ib">  <input type="text" name="item_quantity" id="item_quantity"/></span>
            </div>
            <div class="box">
                <span class="label">Unit Price </span>
                <span class="ib">  <input type="text" name="item_unit_price" id="item_unit_price"/></span>
            </div>
            <div class="box">
                <span class="label">Discount Percentage </span>
                <span class="ib">  <input type="text" name="discount_per" id="discount_per"/>
                </span></div>
            <div class="box">
                <input type="button" id="submit_items" value="Submit"/>
            </div>
        </form>

CSS

.label{
    display:block;
    float:left;
    min-width:150px;
}