Align second line link with start of first line - html

Question

Please check the below snippet.
When a link goes on multiple lines, I'd like the text from all lines below the first one to be aligned with the start (left position) of the first line. The icon should still be vertically aligned with the first line (as it is now).
In other words, in the below example, the word "longer" should be aligned below the word "This".
I have tried playing with paddings and text-indents without success. Does anyone have a solution?
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>

Answer 1

Add this code in css..
.column li {
position: relative;
padding-left: 25px;
}
li span {
position: absolute;
left: 0;
top: 0;
}
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
.column li {
position: relative;
padding-left: 25px;
}
li span {
position: absolute;
left: 0;
top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>

Answer 2

Just add display:flex to your li and it will work if you want the text to move further away from the icon then use margins too.
Hope this is what you are looking for.
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li {
display: flex;
}
a {
margin-left: 10px;
}
.n {
width: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li>
<div class="n"><span class="fa fa-fw fa-tree"></span></div> Hello</li>
<li>
<div class="n"><span class="fa fa-fw fa-car"></span></div> This is a much longer link</li>
<li>
<div class="n"><span class="fa fa-fw fa-book"></span></div> Hello again</li>
</ul>
</div>
If we dont add width to icons and there is flex
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
li
{
display:flex;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree" style="background-color:blue;"></span> Hello</li>
<li><span class="fa fa-fw fa-car" style="background-color:blue;"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book" style="background-color:blue;"></span> Hello again</li>
</ul>
</div>

Answer 3

As an alternative, you can also use a display: grid; layout on your li tag.
.column {
width: 150px;
background-color: lightgrey;
padding: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
.column li {
display: grid;
grid-template-columns: auto 1fr;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
<ul>
<li><span class="fa fa-fw fa-tree"></span> Hello</li>
<li><span class="fa fa-fw fa-car"></span> This is a much longer link</li>
<li><span class="fa fa-fw fa-book"></span> Hello again</li>
</ul>
</div>