Style-Form

by mikeskinner

HTML

<form class="yform">
    <div class="arrange arrange--12">
        <div class="arrange_unit arrange_unit--fill">
            <label for="form-arrange-1-text-1">Label name</label>
            <span class="help-inline">Optional</span>
            <input id="form-arrange-1-text-1" name="form-arrange-1-text-1" type="text" placeholder="tacos, cheap dinner, Max's">
        </div>
        <div class="arrange_unit u-nowrap">
            <label for="form-arrange-1-text-2">Label name</label>
            <span class="help-inline">Optional</span>
            <input id="form-arrange-1-text-2" name="form-arrange-1-text-2" type="text" placeholder="tacos, cheap dinner, Max's">
        </div>
    </div>

    <div class="arrange arrange--12 arrange--equal">
        <div class="arrange_unit">
            <label for="form-arrange-2-text-1">Label name</label>
            <span class="help-inline">Optional</span>
            <input id="form-arrange-2-text-1" name="form-arrange-2-text-1" type="text" placeholder="tacos, cheap dinner, Max's">
        </div>
        <div class="arrange_unit">
            <label for="form-arrange-2-text-2">Label name</label>
            <span class="help-inline">Optional</span>
            <input id="form-arrange-2-text-2" name="form-arrange-2-text-2" type="text" placeholder="tacos, cheap dinner, Max's">
        </div>
        <div class="arrange_unit">
            <label for="form-arrange-2-text-3">Label name</label>
            <span class="help-inline">Optional</span>
            <input id="form-arrange-2-text-3" name="form-arrange-2-text-3" type="text" placeholder="tacos, cheap dinner, Max's">
        </div>
    </div>

    <div class="arrange arrange--12">
        <div class="arrange_unit arrange_unit--fill">
            <label class="pseudo-input">
                <span class="pseudo-input_text">Hello</span>
                <span class="pseudo-input_field-holder">
                    <input name="form-arrange-3" placeholder="tacos, cheap dinner,...

CSS

body {
    line-height: 1;
}
button {
    overflow: visible;
    color: inherit;
    font: inherit;
    margin: 0;
    font-weight: 400;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    font-weight: 400;
}
.yform {
    margin-bottom: 18px;
}
.yform .form-row {
    *zoom: 1;
    margin: 0 -15px;
}
.yform .form-row : after, .yform .form-row : before {
    content: " ";
    display: table;
}
.yform .form-row : after {
    clear: both;
}
.yform .pseudo-input, .yform [type=date], .yform [type=email], .yform [type=number], .yform [type=password], .yform [type=tel], .yform [type=text], .yform [type=url], .yform select, .yform textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    *width: 90%;
    margin: 0 0 18px;
    padding: 5px 9px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.28571em;
    line-height: 1.29em;
}


.arrange {
    display: table;
    min-width: 100%;
    table-layout: auto;
}
.arrange--12 {
    margin-left: -12px;
    margin-right: -12px;
    border-collapse: separate;
    border-spacing: 12px 0;
}
.arrange_unit {
    box-sizing: border-box;
    display: table-cell;
    vertical-align: top;
}
.arrange_unit--fill {
    width: 100%;
}
.arrange--12 > .arrange_unit {
    margin-left: 6px;
    margin-right: 6px;
}
.yform .help-block, .yform .help-inline {
    color: #999;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 400;
}
.u-nowrap {
    white-space: nowrap!important;
}

.arrange--12.arrange--equal, .arrange--12.arrange--wrap {
    margin-left: -6px;
    margin-right: -6px;
}


.arrange--12 > .arrange_unit, .ie .arrange--12.arrange--equal {
    border-collapse: collapse;
    border-spacing: 0 0;
}
.arrange--12.arrange--wrap > .arrange_unit, .ie .arrange--12.arrange--equal > .arrange_unit {
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px;
    padding-right:...