CODEWITHSUNDEEP
htmlcss
Jhankar Mahbub
Jhankar Mahbub

Reputation: 9848

How to align multi-line text after icon

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

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>

Upvotes: 7

Views: 6227

Answers (2)

Ankit Bagaria
Ankit Bagaria

Reputation: 33

If you are using bootstrap, you can do it using rows and cols like below :

<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>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 12

Related Questions