JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Testing</title>
</head>
<body>
    <dl>
      <dt>Part I</dt>
      <dd>A small amount of outline text.
        <dl>
          <dt>Section I</dt>
          <dd> A larger amount of text is here
               showing text wrapping in its own
               block.</dd>
        </dl>
      </dd>
      <dt>Part II</dt>
      <dd>More text here with a little wrapping
           going on.</dd>
      <dt>Part III.</dt>
      <dd>A little bit more text.</dd>
    </dl>
</body>
</html>

CSS

dt { float: left; clear: left; margin-right: 10px; font-weight: bold; }
dd { margin: 0; padding: 0; overflow: hidden; }