HTML5, CSS: Make FA icon and link break correctly on mobile

When the first line breaks in mobile, I want to start let the second line start from where the first begins. Any ideas how to reach this on a list?

Codepen: https://codepen.io/altos/pen/KoKEba

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <ul>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="fa fa-download">     </i>
        <span class="file-title">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr     </span>
      </a>
    </li>
  </ul>
</body>

Solution

Give display properties to a to break on same line

ul li a {
    display: flex;
}