Input fields with labels

by Richard Hunter

HTML

<div class="container">
    <label class="foo-label"> <span class="foo-label-text">this is my label:</span>

        <input class="foo-input" type="text" />
    </label>
    
        <label class="foo-label"> <span class="foo-label-text">this is my label:</span>

        <input class="foo-input" type="text" />
    </label>
    
    
</div>

SCSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    padding : 24px;
    margin : 12px;
}
label.foo-label {
    margin : 12px;
    font-family : arial;
    display : inline-block;
    width : 50%;
    .foo-label-text {
        display : block;
        font-style : italic;
        font-size : 12px;
    }
    .foo-input {
        border : solid 1px black;
        width : 100%;
        padding : 4px;
    }
}