sclass HTMLTokenization {
  S internalID = aRandomID();
  S className = "cnc-" + internalID;
  
  new LS tokensHTML; // need to fill these at least
  new LS spacingsHTML;

  // add params for the div here like style or class
  new MapSO divParams;
  
  S headStuff() { ret ""; }
  
  int nCodeTokens() { ret l(tokensHTML); }
  
  S htmlAndJS() { ret html(); }
  S html() {
    ret hcss(replaceIdentifiers([[
      .className {
        margin: 15px;
        /*flex: 1;*/
        display: inline-grid;
        grid-template-columns: repeat(]] + (nCodeTokens()*2+2) + [[, 1fr);
        /*border: 1px solid;*/
      }
  
      .className div {
        text-align: center;
        box-sizing: border-box;
        grid-column: auto / span 2;
      }
      
      .className .cnc-token {
        border: 1px solid;
        margin: 5px;
      }
  
      .className .cnc-spacing {
        margin: 5px 10px;
        border: 1px dotted gray;
        color: gray;
      }
  
      .className div:nth-child(1),
      .className div:nth-child(]] + (nCodeTokens()+2) + [[) {
        grid-column: auto / span 1
      }
  ]], +className)) + div(
    lines(concatLists(
      ll(div()),
      safeMap(tokensHTML, h -> div(h, class := "cnc-token")),
      ll(div()),
      safeMap(padList(spacingsHTML, nCodeTokens()+1, ""),
        h -> div(h, class := "cnc-spacing"))
    )),
    paramsPlus(divParams, class := className));
  }
}