JSFiddle - React, Tailwind, and code Playground

HTML

<section class="articles">
            <h2>Trending</h2>
            <div class="article-wrapper">
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
              <div class="article">
                <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="">
                <p class="article-title">row</p>
                <p class="article-viewcount">row</p>
                <p class="article-creator">row</p>
              </div>
            </div>
          </section>

CSS

.article-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.articles {
  margin-top: 20px;
}

.articles h2 {
  width: 100%;
  margin-bottom: 20px;
}

.article {
  width: 22%;
}

.article img {
  width: 100%;
}

.article-title {
  font-weight: bold;
}

.article-creator {
  font-style: italic;
  margin-top: 5px;
}

@media screen and (max-width: 767px) {
  .article {
    width: 50%;
  }
}