JSFiddle - React, Tailwind, and code Playground

by Lhankor_Mhy

HTML

<dl>
    <div class="item">
      <dt>内容1について</dt>
      <dd>1ページ</dd>
    </div>
    <div class="item">
      <dt>内容の文章が長いバージョン</dt>
      <dd>100ページ</dd>
    </div>
    <div class="item">
      <span class="dummy">　</span>
      <span class="dummy">　</span>
      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
     ...

CSS

* {
      margin: 0;
      padding: 0;
      font-family: Meiryo;
    }

    dl {
      display: grid;
      grid: repeat(2, 1em) / repeat(auto-fill, 1em);
      grid-auto-flow: column dense;
      width: 100%;
      line-height: 1;
      overflow: hidden;
    }

    .item {
      display: contents;
    }

    dt {
      grid-column-start: 1;
    }

    dd {
      grid-column-end: -1;
      justify-self: end;
    }

    .item:nth-child(1) {
      & dt {
        grid-column-end: span 7;
      }

      & dd {
        grid-column-start: span 4;
      }
    }


    .item:nth-child(2) {
      & dt {
        grid-column-end: span 13;
      }

      & dd {
        grid-column-start: span 5;
      }
    }

    .dummy {
      grid-column-start: -1;
    }