Align Checkbox with Label

HTML

<div class="checkboxes">
        <label for="x"><span>Label text x</span> <input type="checkbox" id="x" /></label>
        <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
        <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
    </div>

CSS

.checkboxes label
{
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}

.checkboxes input
{
    vertical-align: middle;
}

.checkboxes label span
{
    vertical-align: middle;
}