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));

  }

}