JSFiddle - React, Tailwind, and code Playground

by Avizura

HTML

<dl>
   
    <dt>Drug 1</dt>
    <dd>10ml</dd>
   
    <dt><span>Another drug</span></dt>
    <dd>50ml</dd>
   
    <dt><span>Third</span></dt>
    <dd>100ml</dd>
    
    
</dl>

CSS

dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }