CSS - display grid for columns

Question

<div class="listInfo">
  <span>column 1 </span>
  <span>column 2</span>
</div>

<style> 
  .listInfo {
      display: grid;
      grid-template: auto / 1fr 1fr;
      row-gap: 8px;
      -webkit-column-gap: 8px;
      column-gap: 8px;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      span {
        display: inline-block;
        font-size: 12px;
        padding-left: 30px;
        background-image: url(/images/current-listings/column-icon.png);
        background-size: 16px;
        background-position: center left;
        background-repeat: no-repeat;
      }
  }
</style>