html - HTML コメント リスト

Question

アバターが左側に表示され、名前とコメントが右側に表示されるコメントリストのコーディングを試みました。問題を解決するための助けをいただければ幸いです。

結果

望ましい結果

HTML

    <section>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another comment</p>
        <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
    </div>
</section>

CSS

  body {
    font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}
    a {
    color: #333;
    text-decoration: none;
    }

    h1, h2, h3 {
    font-weight: 400;
    }

    h1 {
    font-size: 30px;
    }

    h2 {
    font-size: 24px;
    }

    h3 {
    font-size: 20px;
    }

    img {
      height: auto;
      width: 100%;
    }

    section {
    padding: 30px 60px;
    }

    .friend img {
    height: 70px;
    width: 100px;
    display: block;
    }