Aligning text using CSS in a <ul> <li>

Question

Here is my CSS:

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";
}

Here is my HTML:

<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>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.</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>

Here is my output:

Here is my fiddle.

Here is my issue ;)

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 <p> 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.

EDIT:

I have used the attribute display:inline-block; 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

This is what I would like the finished product to look like, but using my custom bullet point created by the fa-angle-right class:

Answer 1

Try white-space:nowrap Fiddle

 ul.list-ok { list-style: none; margin: 0; } ul.list-ok li { margin-bottom: 8px; height: 18px; line-height: 18px; white-space:nowrap; } .fa-angle-right:before { content: "\\f105"; } 

 <ul class="list-ok" style="margin-top: 25px !important;display:inline-block;"> <li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money</li> <li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li> </ul> 

Answer 2

Wrap the li text in ' <\\span><\\/span> ' tag and style it with as per your need. try to fix the min-width of the <\\span><\\/span> so that it will not distorted in smaller screens.