title: CSS: Aligning a paragraph element with a span containing SVGs
body: <p>I have a <code>&lt;p&gt;</code> element which appears above a set of SVGs which are contained within a <code>&lt;span&gt;</code> element as you can see below. I would like the span containing the SVGs to align with the text 'Question 1'. </p>
  
  <p><img src="https://i.stack.imgur.com/71rVa.png" alt="alignment"></p>
  
  <p><strong>Things which I have tried:</strong></p>
  
  <ul>
  <li>I found no margins or paddings that conflict with this alignment.</li>
  <li>The line-height is 0 for the paragraph text.</li>
  <li>Neither are set to <code>display: block;</code>, they are instead set to <code>display: inline;</code></li>
  </ul>
  
  <p>i have also included the a simplified version of the problem here (notice there is only one icon as the SVGs make it harder to follow): <a href="https://jsfiddle.net/qt3c2m49/" rel="nofollow noreferrer">https://jsfiddle.net/qt3c2m49/</a></p>