title: css grid vs flexbox : why does css grid cause repaints and flexbox not
body: <p>I like very much css grid because of its simplicity. But there seems to be a performance issue with css grid that flexbox does not have.</p>
  <p>I have implemented a two column full screen page both columns having a form with input box and a list of items with overflow-y:auto. One example where the left and right panel are implemented using flexbox and one where left and right panel are implemented with css grid.</p>
  <p>this is the flexbox version : <a href="https://web-platform-wtfgmj.stackblitz.io/" rel="nofollow noreferrer">https://web-platform-wtfgmj.stackblitz.io/</a></p>
  <p>and this is the css grid version : <a href="https://web-platform-wtfgmj.stackblitz.io/index2.html" rel="nofollow noreferrer">https://web-platform-wtfgmj.stackblitz.io/index2.html</a></p>
  <p>Open the developper tools in chrome and enable paint flashing (tools/rendering has to be enabled).
  When typing in one of the input boxes, the css grid version will repaint all items in the list. The flexbox version does not have this problem.</p>
  <p>I would like to understand why css grid repaints all items in the list when typing in the input box ? And can it somehow be avoided ?</p>
  <p>Update : Seems to be problem with stackblitz...
  included as code snippets</p>
  <p><strong>Update 2: because it's little bit burried in comments:</strong>
  So I filed a bug report with chrome (bugs.chromium.org/p/chromium/issues/detail?id=1204446, upon suggestion of dgrogan) and they seem to confirm that it is a performance issue with chrome's current grid implementation. Apparently they are busy with a new implementation LayoutNGGrid which would solve the issue</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    box-shadow: none;
  }
  my-app {
    display: flex;
    flex-flow: column;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 0, 0, 0.1);
  }
  
  .header {
    display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: 1em;
    gap: 0.6em;
    align-items: flex-start;
    margin: 1em;
  }
  
  .itemspanel {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    min-height: 0;
  }
  
  .itemheader {
    flex: 0 0 auto;
  }
  
  .items {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
    min-height: 0;
  }
  
  .itemrow {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1em;
  }
  .itemrow &gt; span:nth-child(1) {
    flex-basis: 30%;
    flex-grow: 1;
  }
  .itemrow &gt; span:nth-child(2) {
    flex-basis: 70%;
    flex-grow: 1;
  }
  
  .itemrowgrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 0.5em 1em 0.5em;
  }
  
  .panels {
    flex: 1 1 100%;
    display: grid;
    grid-template:
      "left right" 1fr
      / 1fr 2fr;
    gap: 1em;
    min-height: 0;
  }
  .panelleft {
    display: flex;
    flex-flow: column;
    grid-area: left;
    min-height: 0;
  }
  .panelright {
    display: flex;
    flex-flow: column;
    grid-area: right;
    min-height: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;my-app ng-version="11.0.8"&gt;
      &lt;div class="panels"&gt;
        &lt;div class="panelleft"&gt;
          &lt;form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty"&gt;
            &lt;label &gt;Search:&lt;/label&gt;&lt;input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"&gt;&lt;label &gt;&lt;/label&gt;&lt;button  type="button"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class="itemspanel"&gt;
            &lt;div class="itemheader"&gt;&lt;/div&gt;
            &lt;div class="items"&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Joelynn&lt;/span&gt;&lt;span &gt;Hitzmann&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Farris&lt;/span&gt;&lt;span &gt;Espine&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Linnet&lt;/span&gt;&lt;span &gt;Nare&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Heidie&lt;/span&gt;&lt;span &gt;Coolican&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ulrike&lt;/span&gt;&lt;span &gt;Lowndsborough&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Claudine&lt;/span&gt;&lt;span &gt;Caneo&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Janella&lt;/span&gt;&lt;span &gt;Thurborn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Menard&lt;/span&gt;&lt;span &gt;Wolledge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Alasteir&lt;/span&gt;&lt;span &gt;Annandale&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Isabelita&lt;/span&gt;&lt;span &gt;Byrom&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jim&lt;/span&gt;&lt;span &gt;Issard&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mic&lt;/span&gt;&lt;span &gt;Tiddeman&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Carce&lt;/span&gt;&lt;span &gt;McClunaghan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Archibaldo&lt;/span&gt;&lt;span &gt;Jacqueme&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sybilla&lt;/span&gt;&lt;span &gt;Vivyan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Herve&lt;/span&gt;&lt;span &gt;Lund&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Wade&lt;/span&gt;&lt;span &gt;Calway&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Irita&lt;/span&gt;&lt;span &gt;Newvell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lucie&lt;/span&gt;&lt;span &gt;Hurrion&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sherie&lt;/span&gt;&lt;span &gt;Bapty&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Estella&lt;/span&gt;&lt;span &gt;Lettington&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lion&lt;/span&gt;&lt;span &gt;Ganforthe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Siouxie&lt;/span&gt;&lt;span &gt;January 1st&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Clay&lt;/span&gt;&lt;span &gt;Knightsbridge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Shir&lt;/span&gt;&lt;span &gt;Desesquelle&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magda&lt;/span&gt;&lt;span &gt;Brew&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Didi&lt;/span&gt;&lt;span &gt;Scanlon&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Petr&lt;/span&gt;&lt;span &gt;Clerk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Frazier&lt;/span&gt;&lt;span &gt;Harler&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Deonne&lt;/span&gt;&lt;span &gt;Scoffham&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Meggi&lt;/span&gt;&lt;span &gt;Klampk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Darby&lt;/span&gt;&lt;span &gt;Huey&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Berna&lt;/span&gt;&lt;span &gt;Batram&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ashli&lt;/span&gt;&lt;span &gt;Ducarel&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Marilin&lt;/span&gt;&lt;span &gt;Gothup&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mariya&lt;/span&gt;&lt;span &gt;Fettis&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Anett&lt;/span&gt;&lt;span &gt;Stookes&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Adella&lt;/span&gt;&lt;span &gt;Wash&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ricky&lt;/span&gt;&lt;span &gt;Pellamonuten&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Nora&lt;/span&gt;&lt;span &gt;Hourigan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Pancho&lt;/span&gt;&lt;span &gt;Wynn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magdaia&lt;/span&gt;&lt;span &gt;Walthall&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Thatch&lt;/span&gt;&lt;span &gt;Llorente&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Margaretta&lt;/span&gt;&lt;span &gt;Ramiro&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jacques&lt;/span&gt;&lt;span &gt;Smallacombe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Gamaliel&lt;/span&gt;&lt;span &gt;Learoyd&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jyoti&lt;/span&gt;&lt;span &gt;Sholl&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Elbertine&lt;/span&gt;&lt;span &gt;Larwell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sebastian&lt;/span&gt;&lt;span &gt;Alvarado&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mart&lt;/span&gt;&lt;span &gt;Hentzeler&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panelright d2"&gt;
          &lt;form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched"&gt;
            &lt;label &gt;Search:&lt;/label&gt;&lt;input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"&gt;&lt;label &gt;&lt;/label&gt;&lt;button  type="button"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class="itemspanel"&gt;
            &lt;div class="itemheader"&gt;&lt;/div&gt;
            &lt;div class="items"&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Joelynn&lt;/span&gt;&lt;span &gt;Hitzmann&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Farris&lt;/span&gt;&lt;span &gt;Espine&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Linnet&lt;/span&gt;&lt;span &gt;Nare&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Heidie&lt;/span&gt;&lt;span &gt;Coolican&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ulrike&lt;/span&gt;&lt;span &gt;Lowndsborough&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Claudine&lt;/span&gt;&lt;span &gt;Caneo&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Janella&lt;/span&gt;&lt;span &gt;Thurborn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Menard&lt;/span&gt;&lt;span &gt;Wolledge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Alasteir&lt;/span&gt;&lt;span &gt;Annandale&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Isabelita&lt;/span&gt;&lt;span &gt;Byrom&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jim&lt;/span&gt;&lt;span &gt;Issard&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mic&lt;/span&gt;&lt;span &gt;Tiddeman&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Carce&lt;/span&gt;&lt;span &gt;McClunaghan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Archibaldo&lt;/span&gt;&lt;span &gt;Jacqueme&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sybilla&lt;/span&gt;&lt;span &gt;Vivyan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Herve&lt;/span&gt;&lt;span &gt;Lund&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Wade&lt;/span&gt;&lt;span &gt;Calway&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Irita&lt;/span&gt;&lt;span &gt;Newvell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lucie&lt;/span&gt;&lt;span &gt;Hurrion&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sherie&lt;/span&gt;&lt;span &gt;Bapty&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Estella&lt;/span&gt;&lt;span &gt;Lettington&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lion&lt;/span&gt;&lt;span &gt;Ganforthe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Siouxie&lt;/span&gt;&lt;span &gt;January 1st&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Clay&lt;/span&gt;&lt;span &gt;Knightsbridge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Shir&lt;/span&gt;&lt;span &gt;Desesquelle&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magda&lt;/span&gt;&lt;span &gt;Brew&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Didi&lt;/span&gt;&lt;span &gt;Scanlon&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Petr&lt;/span&gt;&lt;span &gt;Clerk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Frazier&lt;/span&gt;&lt;span &gt;Harler&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Deonne&lt;/span&gt;&lt;span &gt;Scoffham&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Meggi&lt;/span&gt;&lt;span &gt;Klampk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Darby&lt;/span&gt;&lt;span &gt;Huey&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Berna&lt;/span&gt;&lt;span &gt;Batram&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ashli&lt;/span&gt;&lt;span &gt;Ducarel&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Marilin&lt;/span&gt;&lt;span &gt;Gothup&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mariya&lt;/span&gt;&lt;span &gt;Fettis&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Anett&lt;/span&gt;&lt;span &gt;Stookes&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Adella&lt;/span&gt;&lt;span &gt;Wash&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ricky&lt;/span&gt;&lt;span &gt;Pellamonuten&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Nora&lt;/span&gt;&lt;span &gt;Hourigan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Pancho&lt;/span&gt;&lt;span &gt;Wynn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magdaia&lt;/span&gt;&lt;span &gt;Walthall&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Thatch&lt;/span&gt;&lt;span &gt;Llorente&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Margaretta&lt;/span&gt;&lt;span &gt;Ramiro&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jacques&lt;/span&gt;&lt;span &gt;Smallacombe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Gamaliel&lt;/span&gt;&lt;span &gt;Learoyd&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jyoti&lt;/span&gt;&lt;span &gt;Sholl&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Elbertine&lt;/span&gt;&lt;span &gt;Larwell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sebastian&lt;/span&gt;&lt;span &gt;Alvarado&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mart&lt;/span&gt;&lt;span &gt;Hentzeler&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    box-shadow: none;
  }
  
  
  
  my-app {
    display: flex;
    flex-flow: column;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 0, 0, 0.1);
  }
  
  .header {
    display: grid;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: 1em;
    gap: 0.6em;
    align-items: flex-start;
    margin: 1em;
  }
  
  .itemspanel {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column;
    min-height: 0;
  }
  
  .itemheader {
    flex: 0 0 auto;
  }
  
  .items {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
    min-height: 0;
  }
  
  .itemrow {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1em;
  }
  .itemrow &gt; span:nth-child(1) {
    flex-basis: 30%;
    flex-grow: 1;
  }
  .itemrow &gt; span:nth-child(2) {
    flex-basis: 70%;
    flex-grow: 1;
  }
  
  .itemrowgrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 0.5em 1em 0.5em;
  }
  
  .panels {
    flex: 1 1 100%;
    display: flex;
    flex-flow: row;
    min-height: 0;
  }
  .panelleft,
  .panelright {
    display: flex;
    flex-flow: column;
    min-height: 0;
  }
  
  .panelleft {
    flex: 1 1 100%;
  }
  .panelright {
    flex: 1 1 200%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="reset.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;my-app ng-version="11.0.8"&gt;
      &lt;div class="panels"&gt;
        &lt;div class="panelleft"&gt;
          &lt;form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty"&gt;
            &lt;label &gt;Search:&lt;/label&gt;&lt;input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"&gt;&lt;label &gt;&lt;/label&gt;&lt;button  type="button"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class="itemspanel"&gt;
            &lt;div class="itemheader"&gt;&lt;/div&gt;
            &lt;div class="items"&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Joelynn&lt;/span&gt;&lt;span &gt;Hitzmann&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Farris&lt;/span&gt;&lt;span &gt;Espine&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Linnet&lt;/span&gt;&lt;span &gt;Nare&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Heidie&lt;/span&gt;&lt;span &gt;Coolican&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ulrike&lt;/span&gt;&lt;span &gt;Lowndsborough&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Claudine&lt;/span&gt;&lt;span &gt;Caneo&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Janella&lt;/span&gt;&lt;span &gt;Thurborn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Menard&lt;/span&gt;&lt;span &gt;Wolledge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Alasteir&lt;/span&gt;&lt;span &gt;Annandale&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Isabelita&lt;/span&gt;&lt;span &gt;Byrom&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jim&lt;/span&gt;&lt;span &gt;Issard&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mic&lt;/span&gt;&lt;span &gt;Tiddeman&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Carce&lt;/span&gt;&lt;span &gt;McClunaghan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Archibaldo&lt;/span&gt;&lt;span &gt;Jacqueme&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sybilla&lt;/span&gt;&lt;span &gt;Vivyan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Herve&lt;/span&gt;&lt;span &gt;Lund&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Wade&lt;/span&gt;&lt;span &gt;Calway&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Irita&lt;/span&gt;&lt;span &gt;Newvell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lucie&lt;/span&gt;&lt;span &gt;Hurrion&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sherie&lt;/span&gt;&lt;span &gt;Bapty&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Estella&lt;/span&gt;&lt;span &gt;Lettington&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lion&lt;/span&gt;&lt;span &gt;Ganforthe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Siouxie&lt;/span&gt;&lt;span &gt;January 1st&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Clay&lt;/span&gt;&lt;span &gt;Knightsbridge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Shir&lt;/span&gt;&lt;span &gt;Desesquelle&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magda&lt;/span&gt;&lt;span &gt;Brew&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Didi&lt;/span&gt;&lt;span &gt;Scanlon&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Petr&lt;/span&gt;&lt;span &gt;Clerk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Frazier&lt;/span&gt;&lt;span &gt;Harler&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Deonne&lt;/span&gt;&lt;span &gt;Scoffham&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Meggi&lt;/span&gt;&lt;span &gt;Klampk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Darby&lt;/span&gt;&lt;span &gt;Huey&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Berna&lt;/span&gt;&lt;span &gt;Batram&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ashli&lt;/span&gt;&lt;span &gt;Ducarel&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Marilin&lt;/span&gt;&lt;span &gt;Gothup&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mariya&lt;/span&gt;&lt;span &gt;Fettis&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Anett&lt;/span&gt;&lt;span &gt;Stookes&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Adella&lt;/span&gt;&lt;span &gt;Wash&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ricky&lt;/span&gt;&lt;span &gt;Pellamonuten&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Nora&lt;/span&gt;&lt;span &gt;Hourigan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Pancho&lt;/span&gt;&lt;span &gt;Wynn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magdaia&lt;/span&gt;&lt;span &gt;Walthall&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Thatch&lt;/span&gt;&lt;span &gt;Llorente&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Margaretta&lt;/span&gt;&lt;span &gt;Ramiro&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jacques&lt;/span&gt;&lt;span &gt;Smallacombe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Gamaliel&lt;/span&gt;&lt;span &gt;Learoyd&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jyoti&lt;/span&gt;&lt;span &gt;Sholl&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Elbertine&lt;/span&gt;&lt;span &gt;Larwell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sebastian&lt;/span&gt;&lt;span &gt;Alvarado&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mart&lt;/span&gt;&lt;span &gt;Hentzeler&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panelright d2"&gt;
          &lt;form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched"&gt;
            &lt;label &gt;Search:&lt;/label&gt;&lt;input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"&gt;&lt;label &gt;&lt;/label&gt;&lt;button  type="button"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
          &lt;div class="itemspanel"&gt;
            &lt;div class="itemheader"&gt;&lt;/div&gt;
            &lt;div class="items"&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Joelynn&lt;/span&gt;&lt;span &gt;Hitzmann&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Farris&lt;/span&gt;&lt;span &gt;Espine&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Linnet&lt;/span&gt;&lt;span &gt;Nare&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Heidie&lt;/span&gt;&lt;span &gt;Coolican&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ulrike&lt;/span&gt;&lt;span &gt;Lowndsborough&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Claudine&lt;/span&gt;&lt;span &gt;Caneo&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Janella&lt;/span&gt;&lt;span &gt;Thurborn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Menard&lt;/span&gt;&lt;span &gt;Wolledge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Alasteir&lt;/span&gt;&lt;span &gt;Annandale&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Isabelita&lt;/span&gt;&lt;span &gt;Byrom&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jim&lt;/span&gt;&lt;span &gt;Issard&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mic&lt;/span&gt;&lt;span &gt;Tiddeman&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Carce&lt;/span&gt;&lt;span &gt;McClunaghan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Archibaldo&lt;/span&gt;&lt;span &gt;Jacqueme&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sybilla&lt;/span&gt;&lt;span &gt;Vivyan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Herve&lt;/span&gt;&lt;span &gt;Lund&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Wade&lt;/span&gt;&lt;span &gt;Calway&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Irita&lt;/span&gt;&lt;span &gt;Newvell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lucie&lt;/span&gt;&lt;span &gt;Hurrion&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sherie&lt;/span&gt;&lt;span &gt;Bapty&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Estella&lt;/span&gt;&lt;span &gt;Lettington&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Lion&lt;/span&gt;&lt;span &gt;Ganforthe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Siouxie&lt;/span&gt;&lt;span &gt;January 1st&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Clay&lt;/span&gt;&lt;span &gt;Knightsbridge&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Shir&lt;/span&gt;&lt;span &gt;Desesquelle&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magda&lt;/span&gt;&lt;span &gt;Brew&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Didi&lt;/span&gt;&lt;span &gt;Scanlon&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Petr&lt;/span&gt;&lt;span &gt;Clerk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Frazier&lt;/span&gt;&lt;span &gt;Harler&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Deonne&lt;/span&gt;&lt;span &gt;Scoffham&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Meggi&lt;/span&gt;&lt;span &gt;Klampk&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Darby&lt;/span&gt;&lt;span &gt;Huey&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Berna&lt;/span&gt;&lt;span &gt;Batram&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ashli&lt;/span&gt;&lt;span &gt;Ducarel&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Marilin&lt;/span&gt;&lt;span &gt;Gothup&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mariya&lt;/span&gt;&lt;span &gt;Fettis&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Anett&lt;/span&gt;&lt;span &gt;Stookes&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Adella&lt;/span&gt;&lt;span &gt;Wash&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Ricky&lt;/span&gt;&lt;span &gt;Pellamonuten&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Nora&lt;/span&gt;&lt;span &gt;Hourigan&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Pancho&lt;/span&gt;&lt;span &gt;Wynn&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Magdaia&lt;/span&gt;&lt;span &gt;Walthall&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Thatch&lt;/span&gt;&lt;span &gt;Llorente&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Margaretta&lt;/span&gt;&lt;span &gt;Ramiro&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jacques&lt;/span&gt;&lt;span &gt;Smallacombe&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Gamaliel&lt;/span&gt;&lt;span &gt;Learoyd&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Jyoti&lt;/span&gt;&lt;span &gt;Sholl&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Elbertine&lt;/span&gt;&lt;span &gt;Larwell&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Sebastian&lt;/span&gt;&lt;span &gt;Alvarado&lt;/span&gt;&lt;/div&gt;
              &lt;div class="itemrowgrid"&gt;&lt;span &gt;Mart&lt;/span&gt;&lt;span &gt;Hentzeler&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>