JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  ← Resize pane to see gap shrink down to 4px up to 64px
</div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

ul {
  display: inline-flex;
  padding: 0;
  list-style: none;
  gap: clamp(4px, 1vw, 64px);
}

li {
  border: 1px solid gray;
  padding: 5px;
}