JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="list">
  <li>
    <p>list01</p>
     <p>list01</p>
      <p>list01</p>
       <p>list01</p>
        <p>list01</p>
         <p>list01</p>
          <p>list01</p>
           <p>list01</p>
            <p>list01</p>
  </li>
  <li>list02</li>
  <li>list03</li>
</ul>


<ul class="list">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>


<ul class="list">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>

SCSS

body {
  background: #000000;
}
* {
  box-sizing: border-box;
}

.list {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  margin: 50px 80px;
  li {
    background: #999999;
    grid-column: 2 / 3;
    padding: 20px;
    &:nth-child(1) {
      position: relative;
      top: 0;
      left: 0;
      grid-column: 1 / 2;
      grid-row: 1 / -1;
      background: #eeeeee;
      width: 100%;
      height: 100%;
    }
  }
}