append/prepend input fields

by ritcheyer

HTML

<div class="form-framework">
                        <ul>
                            <li class="group form-row form-inline form-input-append">
                                <label for="minMemory" class="form-large" id="minMemoryLabel">Memory:</label>
                                <input class="evtReqdInput" id="minMemory" name="minMemory" type="text" value="1024" onkeypress='validateNumberOnly(event)'/>
                                <span class="form-add-on">MB</span>
                            </li>
                            <li class="group form-row form-inline form-input-append">
                                <label for="minStorage" class="form-large" id="minStorageLabel">Local Storage:</label>
                                <input class="evtReqdInput" id="minStorage" name="minStorage" type="text" value="10" onkeypress='validateNumberOnly(event)'/>
                                <span class="form-add-on">GB</span>
                            </li>
                            <li class="group form-row form-inline form-input-append">
                                <label for="minMemory" class="form-large" id="minMemoryLabel">Memory:</label>
                                <input class="evtReqdInput" id="minMemory" name="minMemory" type="text" value="1024" onkeypress='validateNumberOnly(event)'/>
                                <span class="form-add-on">MB</span>
                            </li>
                            <li class="group form-row form-inline form-input-append">
                                <label for="minStorage" class="form-large" id="minStorageLabel">Local Storage:</label>
                                <input class="evtReqdInput" id="minStorage" name="minStorage" type="text" value="10" onkeypress='validateNumberOnly(event)'/>
                                <span class="form-add-on">GB</span>
                            </li>


                             <li class="group form-row form-inline form-input-append">
        ...

CSS

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


html, body, div, 
article, aside, figure, footer, header, hgroup, nav, section, 
span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, code, del, dfn, em, i, img, q, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* -----------------------------------------------------------------------------
   HTML5 Elements
   -------------------------------------------------------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video       { display: inline-block; }

/* -----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

nav ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0;  }
caption,
th,
td {
    text-align: left;
    font-weight: 400;
}
blockquote:before,
blockquote:after,
q:before,
q:after      { content: "";   }
q,blockquote { quotes: "" ""; }
input,textarea { margin: 0; }
input,...