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 { border: 1px solid #000; margin: 2em; width: 200px; overflow: hidden; }
dt { float: left; clear: left; width: 50px; color: #f00; }
dd { float: left; color: #0a0; white-space: nowrap; }

dd {
    
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    
}