JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<div id="main">
    <dl class="aligned">
        <dt>First title</dt>
        <dd>1.1 definition</dd>
        <dd>1.2 definition - very long to test wrapping</dd>
        <dd>1.3 definition</dd>
        
        <dt>Second title</dt>
        <dd></dd>
        <dd></dd>
        
        <dt>Third title</dt>
        <dd>3.0 definition</dd>
        
        <dt>Fourth title - very long to test wrapping</dt>
        
        <dt>Fifth title</dt>
        
        <dt>Sixth title</dt>
        <dd>6.0 definition</dd>
    </dl>
</div>

CSS

*       {margin:0; padding:0;}
#main   {font-size:1.4em;}

dl      {width:300px; background:#efefef; overflow:hidden;}
dt      {font-weight:bold; clear:both; float:left; display:inline; margin:0 0 0.5em 0; width:100px;}
dd      {float:right; display:inline; margin:0 0 0.5em 10px; width:190px;}