title: Issue with justify text in CSS
body: <p>I am trying to justify text on website, but I am not able to do it in right way.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li style="text-align: justify;"&gt;
         ::before
          &lt;span style="font-size: 14pt;"&gt;Text text text text text Text text text text text Text text text text text&lt;/span&gt;
          &lt;span style="font-size: 14pt;"&gt;taming my thick tresses, making this best for touch-up work, bangs and people with thin hair.&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS part:</p>
  
  <pre><code>#inbound-list.class-SyMhZJtiLv li {
     color: #000000;
     list-style: none;
     font-weight: 500;
     font-size: 16px;
     vertical-align: top;
     margin-bottom: 10px;
  }
  
  #inbound-list.class-SyMhZJtiLv li:before {
     background: transparent;
     border-radius: 50% 50% 50% 50%;
     color: #000000;
     display: inline-block;
     font-family: 'FontAwesome';
     font-size: 18px;
     line-height: 18px;
     margin-right: 0.5em;
     margin-top: 0;
     text-align: center;
  }
  
  #inbound-list.fa-list-check li:before {
     content: "\f00c";
  }
  </code></pre>
  
  <p>It looks like:
  <a href="https://i.stack.imgur.com/XTaOn.png" rel="nofollow"><img src="https://i.stack.imgur.com/XTaOn.png" alt="enter image description here"></a></p>
  
  <p>I'd like the thext should be verticaly alligned at the red line (of cource the line is for help here).
  <a href="https://i.stack.imgur.com/9G2ub.png" rel="nofollow"><img src="https://i.stack.imgur.com/9G2ub.png" alt="enter image description here"></a></p>
  
  <p>I have not ideas anymore how to do it. Maybe do you have some ideas?</p>