JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<ul class="list">
  <li>Item#1</li>
  <li class="list__item_inner">
    <ul class="list__inner">
      <li>Item-inner#1</li>
      <li>Item-inner#2</li>
    </ul>
  </li>
  <li>Item#2</li>
</ul>

CSS

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-family: monospace;
}

.list {
  display: flex;
  background-color: lightblue;
  justify-content: space-between;
}

[class$="_inner"] {
  display: contents;
}

li {
  min-height: 50px;
  background-color: red;
  padding: 10px;
  border: 1px solid #000;
}