List number alignment using CSS3

Question

I'm trying to create the following effect using CSS3 (targeting Chrome only). Essentially I want a numbered <ol> element which contains one radio button and one label. The aim is to get the list number, the radio & the label to all align in the center:

This is my markup:

<ol>
    <li>
        <div class="wrapper">
            <div class="left">
                <input type="radio" />
            </div>
            <div class="right">
                <label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
            </div>
        </div>
    </li>
</ol>

And the CSS I have so far:

.wrapper {
    display: flex
}
.left {
    width: 50px;
    position: relative;
}
.right {
    flex: 1;
}
input {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

And a jsFiddle of the above.

I've tried using floats (which breaks the <ol> numbering), I've tried using wrapping divs and different display types (table/table-cell) and I've landed at my closest effort yet by using flex.

The problem is I still can't get the list number to line up with the radio buttons. It always aligns to the top of the <li> (along with some random whitespace which I can't figure out).

I'm open to using anything to create the desired effect shown in the image. Even Javascript/jQuery. But only if a pure CSS option is not possible.

Answer 1

Do you really need all those div's inside your li? if not, it's all a matter of vertical-align and setting the width of the elements inside.

You could rewrite your html to:

<ol>
    <li>
        <input type="radio" />
        <label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
    </li>
</ol> 

and css to:

li input {
    vertical-align: text-bottom;
    display:inline-block;
    width:5%;
}
li label {
    vertical-align: middle;
    display:inline-block;
    width:90%;
}

Here is a demo fiddle