Как выровнять значок слева с текстом вправо?

Question

Я пытаюсь правильно выровнять значок с левой стороны с текстом с правой стороны.

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

На данный момент это выглядит следующим образом:

Окончательный вариант должен выглядеть следующим образом:

Answer 1

Вы должны сбросить верхнее поле по умолчанию на теге p и увеличить ширину тега i или просто удалить ширину и использовать несколько правильных дополнений или полей для интервала.

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>