title: HTML / CSS Vertical align two lines next to radio
body: <p>I'm trying to have two lines aligned to the middle of a radio button, shown below.</p>
  
  <p><img src="https://i.stack.imgur.com/42U10.png" alt="Radio"></p>
  
  <p>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.</p>
  
  <p>Thanks for your help!</p>
  
  <p>EDIT:
  here's my code that I've been working with:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" /&gt;
              &lt;label for="method-{{Description}}" class="pb-shipping-method-label"&gt;{{Description}} ({{DeliveryTime}})
              &lt;span&gt;{{Price}}&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>