JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<dl>
          <dd>hot drink</dd>
          <dd>cold drink</dd>
        </dl>
        <dl>
          <dd>hot drink</dd>
          <dd>cold drink</dd>
        </dl>
        <dl>
          <dd>hot drink</dd>
          <dd>cold drink</dd>
        </dl>
        <dl>
          <dd>hot drink</dd>
          <dd>cold drink</dd>
        </dl>

CSS

dl,dd
        {
            padding:0;
            margin:0;
        }

        dl
        {
            width:100%;
            border:1px solid red;
            background: yellow;
            display:table;
        }

        dd
        {
            display:table-cell;
            
        }

        dl > dd:first-child
        {
            background:red;
            width: 20%;
        }

        dl > dd:nth-child(2)
                {
            background:blue;
            width: 80%;
        }