JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<dl>
  <dt>Lorem ipsum dolor sit.</dt>
  <dd>44</dd>
  <dt>Lorem ipsum dolor sit.</dt>
  <dd>44</dd>
  <dt>Lorem ipsum dolor sit orem ipsum dolor sit amet, consectetur.</dt>
  <dd>44</dd>
  <dt>Lorem ipsum dolor sit.</dt>
  <dd>44</dd>
  <dt>Lorem ipsum dolor sit.</dt>
  <dd>349044959959595959699</dd>
</dl>

CSS

body {
  padding: 3rem;
}

dl {
  display: grid;
  grid-template-columns: [dt] minmax(40%, 60%) [dd] auto;
  max-width: 400px;
  grid-gap: .5em;
}

dt {
  grid-column: dt;
  margin: 0;
}

dd {
  grid-column: dd;
  text-align: right;
  word-break: break-all;
  margin: 0;
}