Aligning a List Number Using CSS3

Question

I am trying to create the following effect using CSS3 (only targeting on Chrome only). Essentially, I want a numbered element <ol>containing one radio button and one label. The goal is to get the list number, radio and shortcut for all centered:

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 that 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 jsFiddle above.

I tried using float (which breaks the numbering <ol>), I tried using wrapping divs and various display types ( table/ table-cell), and I landed with the closest effort flex.

, , . <li> ( , ).

-, , . Javascript/jQuery. CSS .

Answer 1

div's li? , vertical-align width .

html :

<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> 

css:

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

fiddle

Answer 2

, ,

ol {
    counter-reset:li;
    margin-left:0;
    padding-left:0;
}

ol > li {
    position:relative;
    margin:0 0 6px 2em;
    padding:4px 8px;
    list-style:none;
}
ol > li:before {
    content:counter(li);
    counter-increment:li;
    position: absolute;
    top: 50%;
    left : -2em;
    width:2em;
    height: 4em;
    margin: -14px 8px 0 0; /* same as font-size */
    padding: 4px;
    text-align:center;
}

FIDDLE

LI