title: Aligning text using CSS in a <ul> <li>
body: <p>Here is my CSS:</p>
  
  <pre><code>ul.list-ok {
      list-style: none;
      margin: 0;
  }
  
  ul.list-ok li {
      margin-bottom: 8px;
      height: 18px;
      line-height: 18px;
  }
  
  .fa-angle-right:before {
    content: "\f105";
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;ul class="list-ok" style="margin-top: 25px !important;display:inline-block;"&gt;
  &lt;li style="height: initial;"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;Streamlined processes saving you time and money. This is a very long bullet point that needs to wrap and wrap and wrap so that a very long paragraph lines up properly.&lt;/li&gt;
  &lt;li style="height: initial;"&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;A+ rated with the BBB&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my output:</p>
  
  <p><img src="https://i.stack.imgur.com/zLvBs.png" alt="Picture of the output of my CSS and HTMK"></p>
  
  <p><a href="https://jsfiddle.net/wbokm4dL/2/" rel="nofollow noreferrer">Here</a> is my fiddle.</p>
  
  <p>Here is my issue ;)</p>
  
  <p>I would like the the word 'and' to wrap properly and line up with the start of the other text, I was able to achieve that with using other list-styles but the client wants to use this method.  I have searched google and tried a number of different techniques to align the text and also tried enclosing my text in <code>&lt;p&gt;</code> and other elements in an effort to achieve my desired output.  I am at a loss and seem to be getting further away from the answer the more tutorials I follow and links I find on google. Any help is appreciated.</p>
  
  <p>EDIT:</p>
  
  <p>I have used the attribute <code>display:inline-block;</code> but it cuts the text off on a mobile device so this is not an option, i need the text to wrap properly.  In an effort to make the question more simple I cut out several bullet points that are quite long</p>
  
  <p>This is what I would like the finished product to look like, but using my custom bullet point created by the <code>fa-angle-right</code> class:</p>
  
  <p><img src="https://i.stack.imgur.com/fG4VK.png" alt="ideal outcome"></p>