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" 

[![enter image description here](https://i.stack.imgur.com/wntVB.png)](https://i.stack.imgur.com/wntVB.png)

Created a similar example here

```css
div{
  width:400px;
}
```

```html
<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: 
You can do this with `display: table;` and `display: table-cell;` 

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

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

```html
<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>
```
If you are using bootstrap, you can do it using rows and cols like below :

```html
<div className="text-wrap row">
  <div className="col-1 ">
    <FontAwesomeIcon icon={faCheckCircle} size="lg" />
  </div>
  <div className="col-11">This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song This Is my fight Song</div>
</div>
```