JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<section class="articles">
  <article class="articles__article article">
    <h1 class="article__title">Lorem ipsum.</h1>
    <p class="article__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cumque officia asperiores at adipisci ut, labore, quos fuga quo dolor nihil nostrum recusandae molestias? Mollitia distinctio natus voluptatibus, magnam quidem.</p>
  </article>
  <article class="articles__article article">
    <h1 class="article__title">Animi, commodi?</h1>
    <p class="article__content">Explicabo quaerat qui eum fugiat dolorum possimus deleniti fugit inventore molestias voluptate sint, earum pariatur blanditiis ab id veritatis consequuntur minima quis quod velit! Cupiditate laboriosam aperiam nobis dolorem, odio.</p>
  </article>
</section>

SCSS

.article {
  padding: 1rem 2rem;
  background-color: #0002;
  margin-bottom: 2rem;
  
  &__title {
    font-size: 2rem;
  }
}

@media screen and (min-width: 500px) {
  .articles {
    display: flex;
    
    &__article:first-child {
      margin-right: 2rem;
    }
  }
}