How to align list items

Question

I have the following code:

ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}

li {
  margin-bottom: 20px;
}

    li:before {
      content: "\2192";
      padding-right: 10px;
    }

p {
  display: inline;
}

<ul>
    <li><p>Item 1 alaksjd fçalksdj fçlaksjd fçlaksjd fçlkasdj flçkajsdlçkfjasldçkjflçaksd jfçlkasjd flçkajsdlkçf asd</p></li>
    <li><p>Item 2 adflçaksd jglçakhsd flaksdh kjahsdf gjhdfjkh skjchvçz,xckhvj çzlxkcjv zçlxckjvlçz xckjvçzlxkcjv</p></li>
    <li><p>Item 3 asdlçfkj asdlkfj çalsdjf</p></li>
</ul>

The result obtained is this:

The desired result is this:

Note: The red line is only to mark the alignment and does not part of the desired result.

You can do this via CSS?

Answer 1

I believe that using the display: inline in the element p is what complicates everything. Alternatively, you can position the element li:before absolute form and set a left margin for the element p. Behold:

ul {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
}

li {
  margin-bottom: 20px;
  position: relative;
}

li:before {
  content: "\2192";
  padding-right: 10px;
  position: absolute;
}

p {
  margin-left: 20px;
}

<ul>
  <li>
    <p>Item 1 alaksjd fçalksdj fçlaksjd fçlaksjd fçlkasdj flçkajsdlçkfjasldçkjflçaksd jfçlkasjd flçkajsdlkçf asd</p>
  </li>
  <li>
    <p>Item 2 adflçaksd jglçakhsd flaksdh kjahsdf gjhdfjkh skjchvçz,xckhvj çzlxkcjv zçlxckjvlçz xckjvçzlxkcjv</p>
  </li>
  <li>
    <p>Item 3 asdlçfkj asdlkfj çalsdjf</p>
  </li>
</ul>