How to align multi-line text after icon

Question

In a table with indentation (tree data), i need to align second line with the first line.

Notice, text "Tail" doesn't align with "Long"

Created a similar example here

div{
  width:400px;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>

Answer 1

You can do this with display: table; and display: table-cell;

div{
  width:400px;
  border: 1px solid black;
  display: table;
  padding: 10px;
}

a, span {
  display: table-cell;
  vertical-align: top;
}

<div>
  <a href="">ICon:</a>
  <span>This is my fight song. Take back my life song. Prove I'm alright song. My power's turned on
Starting right now I'll be strong</span>    
</div>