Horizontal Label & Input

by oisinlavery

HTML

<fieldset class="cf">
    <label class="even">Label</label>
    <div class="even">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/> 
        <p>Text goes here. Text goes here. Text goes here. Text goes here.</p>              
    </div>
</fieldset>
<fieldset class="cf">
    <label class="even"><span>Label</span></label>
    <div class="even">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>             
    </div>
</fieldset>

CSS

fieldset{
    background: orange;
    padding:20px;
}

label{    
    float:left;
    width:175px;
    background:green;
    padding:5px;
    box-sizing:border-box;
}

label span{
    
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

div{
    display: block;
    background:blue;
    padding:20px;
    box-sizing:border-box;
}

input{
    display:block;
    width:100%;
    border:1px solid red;
    box-sizing:border-box;
    margin-top:15px;
}
input:first-child{
    margin-top:0;
}

p{
    background:violet;
    margin-bottom:0;       
}

.cf{
    zoom:1;
}
.cf:before,
.cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}

JavaScript

$("fieldset").each(function() {
    var x = $(this).children("label").outerWidth();

    $(this).children("div").css("margin-left", x);
});

$("fieldset > *").css("min-height", "").each(function() {

    var x = $(this).outerHeight();

    $(this).siblings(".even").each(function() {
        y = $(this).outerHeight();
        if (y > x) {
            x = y
        }
    });

    $(this).css("min-height", x);
});