Criar esse layout com LI

[FabianoSouza 5]

Pessoal, qual a melhor forma de montar o HTML/CSS para ficar como essa imagem?

 

Pensei em usar DIV e  LI.

 

<DIV>

<ul>

<li>icone</li><li>Nome</li>

<li>32 anos - Feminino. - Insc. em: 15/05/17 - São Bernardo do Campo/SP</li>

</ul>

</DIV>

 

Seria um bom caminho? Alguém poderia me ajudar a criar o CSS para posicionar as LI?

 

Valew!

[viniciussvl 2]

Pode fazer da seguinte forma:

 

HTML

<ul class="avaliacao">
  <li>
    <div class="left">
      <i class="glyphicon glyphicon-ok">LIKE</i>
    </div>
    <div class="right">
      <h2>Nakia Case</h2>
      <p>32 anos - Feminino. - Insc. em: 15/05/17 - São Bernardo do Campo/SP</p>
    </div>
  </li>
</ul>

CSS

.left{width: 10%; float: left; border: 1px solid black;}
.right{max-width: 90%; float: left; border: 1px solid black;}
.avaliacao{list-style: none;}
.avaliacao i{border-radius: 50em; width: 30px; height: 50px; border: 1px solid #09f;}
.avaliacao h2{margin: 0; padding: 0;}
.avaliacao p{margin: 0; padding: 0;}

 

Resultado: https://jsfiddle.net/8je0dgsp/

[FabianoSouza 5]

Valew

viniciussvl

 

Sua sugestão ficou ótima!