Definition List

dl {
    /* custom properties */
    --dt-column-size: 10rem;
    --dt-padding: .75rem;
    --dt-text-align: right;
    --dt-background: rgba(0, 0, 0, .03);
    --dt-font-weight: bold;
    --dd-column-size: auto;
    --dd-padding: .75rem;
    --dd-text-align: left;
    --dd-background: #fff;
    --border: 1px solid #ddd;
    --border-rows: var(--border);
    --border-cols: var(--border);
    --border-rows-responsive: var(--border-cols, --border-rows);
    --border-radius: 0.25rem;

    display: grid;
    border: var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;

    dt {
        font-weight: var(--dt-font-weight);
        text-align: var(--dt-text-align);
        background: var(--dt-background);
        padding: var(--dt-padding);
    }

    dd {
        text-align: var(--dd-text-align);
        background: var(--dd-background);
        padding: var(--dd-padding);
    }

    &.cols {
        grid-template-columns: var(--dt-column-size) var(--dd-column-size);

        dt {
            border-right: var(--border-cols);
            border-bottom: var(--border-rows);

            &:nth-last-child(2) {
                border-bottom: none;
            }
        }

        dd {
            border-right: none;
            border-bottom: var(--border-rows);

            &:last-child {
                border-bottom: none;
            }
        }
    }

    &.rows {
        grid-template-columns: 1fr;
        --dt-text-align: left;
        --dd-text-align: left;

        dt,
        dd {
            border-right: none;
            border-bottom: var(--border-rows);

            &:last-child {
                border-bottom: none;
            }
        }
    }


    /* para resoluciones menores a 768px */
    @media (max-width: 768px) {

        &.cols {
            grid-template-columns: 1fr;
            --dt-text-align: left;
            --dd-text-align: left;

            dt {
                border-right: none;
            }

            dt:nth-last-child(2) {
                border-bottom: var(--border-rows);
            }
        }
    }
}

<dl class="cols">
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>

<br><br>

<dl class="rows">
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>