<main>
  <div class="container">
  <!--card with shadow-->
    <article class="card shadow">
      <div>
        <img src="https://images.unsplash.com/photo-1540317700647-ec69694d70d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="image">
      </div>

      <div>
        <p><strong>Lorem ipsum dolor sit dolor sit amet, conse ctetur adipis icing elit...</strong></p>
        <span>
          <i class="fab fa-instagram"></i>
           Instagram - <time>10 min ago</time>
         </span>
      </div>
    </article>
    
     
  <!--card with border-->
    <article class="card border">
      <div>
        <img src="https://images.unsplash.com/photo-1509070016581-915335454d19?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="image">
      </div>

      <div>
        <p><strong>Lorem ipsum dolor sit dolor sit amet, conse ctetur adipis icing elit...</strong></p>
        <span>
          <i class="fab fa-facebook"></i>
           Facebook - <time>16 min ago</time>
         </span>
      </div>
    </article>
    
 
     
  <!--card with shadow curve-->
    <article class="card shadow curve">
      <div>
        <img src="https://images.unsplash.com/photo-1506202687253-52e1b29d3527?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="image">
      </div>

      <div>
        <p><strong>Lorem ipsum dolor sit dolor sit amet, conse ctetur adipis icing elit...</strong></p>
        <span>
          <i class="fab fa-twitter"></i>
            Twitter - <time>28 min ago</time>
         </span>
      </div>
    </article>
    
     
  <!--card with curve and border-->
    <article class="card border curve">
      <div>
        <img src="https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="image">
      </div>

      <div>
        <p><strong>Lorem ipsum dolor sit dolor sit amet, conse ctetur adipis icing elit...</strong></p>
        <span>
          <i class="fab fa-google"></i>
            Google - <time>11 min ago</time>
         </span>
      </div>
    </article>
    
  </div>
</main>
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5;
  font-size: 1rem;
  color: #444;
  margin: 0;
  background-color: #efe9e9;
}

i{
  color: #888;
}

.container {
  width: 96%;
  margin: 1rem auto;
}

.card {
  height: 120px;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  overflow: hidden;
  background-color: #fff;
}

.card div:first-child {
  flex-basis: 35%;
}

.card div:last-child {
  flex-basis: 65%;
  padding: 0 0.5rem 0.25rem;
}

.card img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.card p {
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}

.shadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.border {
  border: 1px solid #ddd;
}

.curve {
  border-radius: 0.35rem;
}

@media (min-width: 768px) {
  .container {
    max-width: 60%;
  }

  .card div:first-child {
    flex-basis: 30%;
  }

  .card div:last-child {
    flex-basis: 70%;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.