xarray.Dataset CSS grid

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="xr-warp">
<div class='xr-header'>xarray.Dataset</div>
<div class="xr-sections">
  <div class="xr-section-item">
  <input id="-1" type="checkbox" class="xr-section-summary-in" disabled>
  <label for="-1" class="xr-section-summary">Dimensions:</label>
  <div class="xr-section-inline-details">
    (x, y)
  </div>
  <div class="xr-section-details xr-var-list">
  </div>
  <div class="xr-section-item">
  <input id="0" type="checkbox" class="xr-section-summary-in" checked>
  <label for="0" class="xr-section-summary">Coordinates:<span>(4)</span></label>
  <div class="xr-section-inline-details"></div>
  <div class="xr-section-details xr-var-list">
    <div class="xr-var-item">
      <div class="xr-var-name">
        <span>x_cooooooooooooord</span>
      </div>
      <div class="xr-var-dims">(x)</div>
      <div class="xr-var-dtype">float64</div>
      <div class="xr-var-preview">1 2 3</div>
      <input id="0_0a" type="checkbox" class="xr-var-attrs-in" disabled>
      <label for="0_0a">
        <i class="fa fa-file-text-o" aria-hidden="true"></i> 
      </label>
      <input id="0_0b" type="checkbox", class="xr-var-data-in">
      <label for="0_0b">
        <i class="fa fa-database" aria-hidden="true"></i>
      </label>
      <div class="xr-var-attrs"></div>
      <pre class="xr-var-data">&lt;data repr&gt;</pre>
    </div>
    <div class="xr-var-item">
      <div class="xr-var-name">
        <span>y</span>
      </div>
      <div class="xr-var-dims">(y)</div>
      <div class="xr-var-dtype">float64</div>
      <div class="xr-var-preview">1 2 3</div>
      <input id="0_1a" type="checkbox" class="xr-var-attrs-in" disabled>
      <label for="0_1a">
        <i class="fa fa-file-text-o" aria-hidden="true"></i> 
      </label>
      <input id="0_1b" type="checkbox", class="xr-var-data-in">
      <label for="0_1b">
        <i class="fa fa-database"...

CSS

body {
  /* jupyterlab settings */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  background-color: #fff;
}

.xr-warp {
  width: 540px;
}

.xr-header {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: solid 1px #ccc;
  color: #555;;
}

.xr-sections {
  display: grid;
  grid-template-columns: minmax(150px, auto) 0.5fr auto 1fr 20px 20px;
}

.xr-section-item {
  display: contents;
}

.xr-section-item input {
  display: none;
}

.xr-section-item input:enabled + label {
  cursor: pointer;
}

.xr-section-summary {
  grid-column: 1;
  color: #555;
  font-weight: 500;
}

.xr-section-summary > span {
  display: inline-block;
  padding-left: 0.5em;
}

.xr-section-summary-in + label:before {
  display: inline-block;
  content: '►';
  font-size: 11px;
  width: 15px;
  text-align: center;
}

.xr-section-summary-in:disabled + label:before {
  color: #777;
}

.xr-section-summary-in:checked + label:before {
  content: '▼';
}

.xr-section-summary-in:checked + label > span {
  display: none;
}

.xr-section-summary,
.xr-section-inline-details {
  padding-top: 4px;
  padding-bottom: 4px;
}

.xr-section-inline-details {
  grid-column: 2 / -1;
}

.xr-section-details {
  display: none;
  grid-column: 1 / -1;
  margin-bottom: 5px;
}

.xr-section-item > input:checked + label + div + div.xr-section-details {
  display: contents;
}

.xr-var-item {
  display: contents;
}

.xr-var-item > div,
.xr-var-item > label {
  background-color: #fcfcfc;
}

.xr-var-list > div:nth-child(odd) > div,
.xr-var-list > div:nth-child(odd) > label {
  background-color: #efefef;
}

.xr-var-item:hover {
  background-color: red !important;
}

.xr-var-name {
  grid-column: 1;
}

.xr-var-name > span {
  padding-right: 10px;
}

.xr-var-dims {
  grid-column: 2;
}

.xr-var-dtype {
  grid-column: 3;
  text-align: right;
  padding-right: 10px;
  color: #555;
}

.xr-var-preview {
  grid-column: 4;
}

.xr-var-attrs,
.xr-var-data {
 ...