Поместить иконку слева от абзаца

Question

Мне нужно разместить абзац справа от иконки Пример JSFiddle :

  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>

со следующим CSS:

i {
  font-size: 36px!important;
  display: inline-block;
}

p {
  display: inline-block;
}

Они неПоявляются рядом ...

Чего мне не хватает?

Answer 1

Попробуйте его

CSS

.table{
 display: table;
width: 100%;
}
.tablecellleft{
 display: table-cell;
 width: 10px;
}
.tablecellright{
 display: table-cell;
 vertical-align: top;
}

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

 <div class="table">
 <div class="tablecellleft">
<i class="material-icons icon">check_circle_outline</i>
 </div>
 <div class="tablecellright">
  ..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text
 </div>
</div>

Answer 2

Попробуйте это

i {
  font-size: 36px!important;
  position:relative;
  width:35px;
}

p {
  display: inline-block;
  width:85%;
}

div {
  width: 100%;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div>
  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>
</div>