martinpolley

@media (max-width: 640px) {
    form div.row label {
        text-align: left !important;
        float: left !important;
    }
}

martinpolley

<link rel="stylesheet" href="css/form.css" />

martinpolley

<form>
    <div class="row">
        <div class="large-8 small-centered columns">
            <fieldset>
                <legend>Shipping address</legend>
                <div class="row">
                    <div class="small-12 columns">
                        <label for="first_name">First name</label>
                        <input type="text" id="first_name" name="first_name"></input>
                    </div>

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="text_input">Type some text</label>
        <input type="text" id="text_input" name="text_input"></input>
    </div>
</div>    

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="password_input">Password</label>
        <input type="password" id="password_input" name="password_input"></input>
    </div>
</div>    

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="email_input">Email address</label>
        <input type="email" id="email_input" name="email_input"></input>
    </div>
</div>    

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="url_input">URL</label>
        <input type="url" id="url_input" name="url_input"></input>
    </div>
</div>    

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="tel_input">Phone number</label>
        <input type="tel" id="tel_input" name="tel_input"></input>
    </div>
</div>    

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label>Input of type checkbox</label>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <input type="checkbox" id="cb_input_1" name="cb_input_1" value="cb1_true"></input>
        <label for="cb_input_1">Yes please!</label>
    </div>

martinpolley

<div class="row">
    <div class="small-12 columns">
        <label for="number_input">A number</label>
        <input type="number" id="number_input" name="number_input"></input>
    </div>
</div>