panel.html

<!doctype html>
<html style="display: flex">

<head>
  <meta charset="utf8">
  <style>
    html {
      display: flex;
    }

    body {
      margin: 0;
      padding: 0;
      flex: 1;
      display: flex;
    }

    #container {
      display: block;
      flex: 1;
      width: 100%;
      position: fixed;
      overflow: auto;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    #desc {
      width: 240px;
      padding-left: 12px;
      height: 100%;
      position: fixed;
      right: 0;
      top: 0;
      overflow: auto;
      background: white;
      border-left: 1px solid #eee;
    }

    .tag.selected {
      background: rgba(135, 59, 244, 0.5);
    }

    .tag {
      background: rgba(128, 128, 128, 0.5);
      padding-left: 8px;
    }

    .tag.selected::after {
      display: inline-block;
      opacity: 0.4;
      font-size: 12px;
      content: '$gElement';
    }
  </style>
  <link rel="stylesheet" type="text/css" href="./ui/style.css" />
</head>

<body>
  <div id="container">loading...</div>
  <script src="./ui/ui.umd.js"></script>
  <script src="./scripts/panel.js"></script>
</body>

</html>