title: How to keep text inline with icon?
body: <p>I have a problem with CSS. The text in <code>&lt;li&gt;</code> goes below the line of the icon. How can I fix it? I want to make text in the middle of line vertically. It happens when I add the <code>::before</code> with an icon.</p>
  
  <p><a href="https://i.stack.imgur.com/7GuuN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7GuuN.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.benefits-list {
    list-style: none;
  }
  
  .benefits-element {
    margin: 10px 0;
    height: 20;
  }
  
  .benefits-element:first-child {
    margin: 0;
  }
  
  .benefits-element:last-child {
    margin-bottom: 35px;
  }
  
  .benefits-element::before {
    content: '';
    background-image: url('../assets/Icon\ -\ Okay.svg');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="blog"&gt;
    &lt;h2&gt;Just relax &lt;span&gt;&amp;&lt;/span&gt; &lt;br&gt;Let us do the heavy lifting&lt;/h2&gt;
    &lt;p&gt;Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.&lt;/p&gt;
    &lt;ul class="benefits-list"&gt;
      &lt;li class="benefits-element"&gt;Initial Setup &amp; Customizations&lt;/li&gt;
      &lt;li class="benefits-element"&gt;Regular Updates&lt;/li&gt;
      &lt;li class="benefits-element"&gt;Round The Clock Support&lt;/li&gt;
    &lt;/ul&gt;
    &lt;button class="button-main"&gt;Learn more&lt;/button&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>