How to align icon to the left with text to the right?

Question

I am trying to correctly align the icon on the left side with the text on the right side.

 .firm-info { width: 280px; } .firm-info ul { margin-left: -15px; } .firm-info ul li { text-decoration: none; list-style-type: none; margin-bottom: 35px; font-size: 20px; display: flex; } .firm-info ul li i { float: left; font-size: 20px; width: 10px; } .firm-info p { float: left; max-width: 200px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="firm-info"> <ul> <li> <i class="fa fa-info-circle"></i> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor ex fringilla id. Donec cras amet. </p> </li> <li> <i class="fa fa-clock-o"></i> </li> <li> <i class="fa fa-building"></i> </li> </ul> </div> 

At the moment it looks like this:

The final version should look like this:

Answer 1

You should reset the default top margin on the p tag, and increase the width of the i tag, or simply remove the width and use some right padding or margin for spacing.

jsFiddle

 .firm-info { width: 280px; } .firm-info ul { margin-left: -15px; } .firm-info ul li { list-style-type: none; margin-bottom: 35px; font-size: 20px; display: flex; } .firm-info ul li i { margin-right: 10px; } .firm-info ul li p { margin: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="firm-info"> <ul> <li> <i class="fa fa-info-circle"></i> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas venenatis cursus nulla, tempus porttitor.</p> </li> <li> <i class="fa fa-clock-o"></i> <p>Bla</p> </li> <li> <i class="fa fa-building"></i> <p>Bla</p> </li> </ul> </div>