JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="list list-tit">
    <div class="list-sub01"> 11</div>
    <div class="list-sub02"> 11</div>
  </div>
  <div class="list list-tit">
    <div class="list-sub01"></div>
    <div class="list-sub02"></div>
  </div>
   <div class="list list-tit">
    <div class="list-sub01"></div>
    <div class="list-sub02"></div>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, at.
</p>

SCSS

.container {
  background: red;
  padding: 20px;
  /* .list + .list {
    margin-top: 20px;
  } */
  /* display: grid;
  grid-auto-rows: auto; */
  /* flex-direction: column; */
  /* gap: 20px; */
  .list-tit + .list-tit >  .list-sub01:first-child {
    margin-top: 20px;
  }
  .list + .list > .list-sub01:first-child:empty {
    margin-top: 0;
  } 
}