Align checkbox depending of content

I need to align the text content of checkboxes depending on the amount of lines it takes: http://ift.tt/2vO375z

<div class="control-group control small-width">
        <label class="control control--checkbox">
            <input type="checkbox" name="radio" checked="checked">
            <div class="control__indicator"></div>
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare tincidunt ligula nec porttitor. Aliquam rhoncus odio ac augue efficitur, non ornare nisl euismod. Nunc vel neque bibendum mauris porta viverra at et quam. Morbi tincidunt arcu ac est faucibus dictum. Aenean ullamcorper odio lectus.</span>
        </label>
 </div>

 <div class="control-group control small-width">
        <label class="control control--checkbox">
            <input type="checkbox" name="radio" checked="checked">
            <div class="control__indicator"></div>
                        <span>First radio</span>
        </label>
 </div>

For instance, the first one must be aligned with the start of the square radio check box, because the content takes more than one line. The second one, must be aligned in the center of the radio checkbox,since the content only takes one line.

.

I think flexbox should do the trick, but Ive tried nd I could not get it to work, any ideas?