Horizontal Label and Inputs

<!DOCTYPE html>
<html>
<head>

<style>

    body{
        background-color: #FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
    }

    .hrzFormSet{
        align-items: center;
        display:table;
        width: 100%;
        padding-right: 0.5em;
    }

    .hrzFormSet label{
        display: table-cell;
        width: 1px;
        /*USE min-width TO CONTROL WIDTH...   */
        /*min-width: 6em;*/
        text-align: right;
        padding-right: 0.5em;
        white-space: nowrap;
    }

    .hrzFormSet input{
        display: table-cell;
        background-color: #fff;
        border: 1px solid #ddd;
        min-width:100%;
        vertical-align: middle;
        padding:0.3em 0em 0.3em 0.3em;
    }

    .hrzFormSet input[type='checkbox']{
        display:inline-block;
        min-width: auto;
    }

</style>

</head>
<body>

<h2>Horizontal Label and Input</h2>

<div class="hrzFormSet">
    <label>Field 01</label>
    <input type="text" placeholder="Input Info" >
</div>

<div class="hrzFormSet">
    <label>Check 01</label>
    <input type="checkbox" placeholder="Input Info" >
</div>


</body>
</html>