<div>

  <details name="2077" open>
    <summary>Crafting</summary>
    <ul>
      <li>Skippy × 1</li>
      <li>Byakko × 1</li>
      <li>Malorian Arms 3516 × 1</li>
    </ul>
  </details>

  <details name="2077">
    <summary>Upgrades</summary>
    <div>Nothing to upgrade</div>
  </details>

</div>

summary {
  /* Snipped corner */
  corner-shape: bevel;
  border-bottom-right-radius: var(--font-size);
}

/* Ignore */

body {
  --font-size: 1rem;
  --spacing: calc(var(--font-size) * 3);
  font: 700 var(--font-size) orbitron;
  text-transform: uppercase;
  color: hsl(2 97% 64%);
  background: url(images/RPMcBvKKHCckgoRyUhHeZ-1200-80.jpg.webp)
    top left/cover;

  div {
    
    display: flex;
    /* Or */
    display: inline-flex;

    /* Container width */
    width: fit-content;

    /* Space between tabs */
    gap: 3px;

    /* Position ::details-content relative to this <*/
    position: relative;

    /* “Fixes” the resulting collapsed height */
    &:has(details[open]) {
      height: 252px;
    }

    details summary {
      cursor: pointer;
      border: 3px solid hsl(2 97% 64%);
      text-box: cap alphabetic;
      padding: calc(var(--spacing) / 2) var(--spacing);
    }

    details summary,
    details::details-content {
      background: hsl(2 97% 5% / 90%);
    }

    details[open] summary {
      color: hsl(183 98% 68%);
      background: hsl(2 97% 15% / 90%);
    }

    details[open]::details-content {
      width: stretch;
      padding: var(--spacing);
      margin-top: -3px;
      border: 3px solid hsl(2 97% 64%);

      /* Relative to container */
      left: 0;
      position: absolute;
      
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: calc(var(--spacing) / 2);

      li {
        text-box: cap alphabetic;
      }
    }
  }
}