JSFiddle - React, Tailwind, and code Playground

by NickJosevski

HTML

<div>
<ul class="main">
  <li>
      <strong>One</strong>
      <ul class="details">
        <li>foo</li>
        <li>bar</li>
        <li>faz</li>
        <li>baz</li>
      </ul>
  </li>
  <li>
    <strong>Two</strong>
      <ul class="details">
        <li>foo</li>
        <li>bar</li>
        <li>faz</li>
        <li>baz</li>
      </ul>
  </li>
  <li>
    <strong>Three</strong>
      <ul class="details">
        <li>foo</li>
        <li>bar</li>
        <li>faz</li>
        <li>baz</li>
      </ul>
  </li>
</ul>
</div>

CSS

.main li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

.details li {
    display: list-item;
    list-style-type: square;
    padding-right: 1px;
}