HTML / CSS Vertical align two lines next to radio

I'm trying to have two lines aligned to the middle of a radio button, shown below.

What is the best way to achieve this with CSS? I can开发者_运维问答 line up the top line but the bottom line is super stubborn. I'm trying not to float the radio, if possible, as it is being restyled using a jquery plugin.

Thanks for your help!

EDIT: here's my code that I've been working with:

    <div>
        <input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" />
            <label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}})
            <span>{{Price}}</span></label>
    </div>

Two divs, one holding the radio and one holding the text. Set the line-height of the radio div to equal the height of the text div. Also add a vertical-align:middle to the radio itself.

Here's a demo: http://jsfiddle.net/AlienWebguy/JffCD/

Play with vertical-align or margin-top property of your input element.

I achieved this with no extra markup whatsoever. http://jsfiddle.net/KFpXQ/

Good luck :)

Bootstrap 4 with flexbox way:

<div class="d-flex flex-column">
  <div class="d-flex flex-row">
    <div class="pr-2"><input type="radio" /></div>
    <div><label for="...">Name 1<br />Price 1</label></div>
  </div>
  <div class="d-flex flex-row">
    <div class="pr-2"><input type="radio" /></div>
    <div><label for="...">Name 2<br />Price 2</label></div>
  </div>
</div>

Result: