JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<section class="selcitra">
  <article class="selcitra__article elcitra">
    <h1 class="elcitra__title">Lorem ipsum.</h1>
    <p class="elcitra__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="selcitra__article elcitra">
    <h1 class="elcitra__title">Animi, commodi?</h1>
    <p class="elcitra__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

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

.selcitra {
  display: flex;
  &__article:first-child {
    margin-right: 2rem;
  }
}

@media screen and (max-width: 500px) {
  .selcitra {
    flex-direction: column;
    
    &__article:first-child {
      margin-right: 0;
    }
  }
}