JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
    <dt>bla</dt>
    <dd>short</dd>
    <dt>foo</dt>
    <dd>bar bla bla bla bla</dd>
    <dt>moo</dt>
    <dd>lorem ipsum blah blah blah</dd>
</dl>

CSS

dl { 
    width: 200px;
    margin: 2em;
    border: 1px solid #000;
}
dt {
    width: 30%;
    float: left;
}
dt,
dd {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}