Help me with css for DL DD DT

[liencemos]

<dl class="productView-info">
                            <dt class="productView-info-name">Product Dimensions:</dt>
                            <dd class="productView-info-value">&lrm;47 x 21 x 41 inches</dd>
                            <dt class="productView-info-name">Item model number:</dt>
                            <dd class="productView-info-value">&lrm;JG94044</dd>
                            <dt class="productView-info-name">Is Discontinued By Manufacturer:</dt>
                            <dd class="productView-info-value">&lrm;No</dd>
                            <dt class="productView-info-name">Maximum weight recommendation:</dt>
                            <dd class="productView-info-value">&lrm;50 Pounds</dd>
                            <dt class="productView-info-name">Material Type:</dt>
                            <dd class="productView-info-value">&lrm;Alloy Steel</dd>
                            <dt class="productView-info-name">Number Of Items:</dt>
                            <dd class="productView-info-value">1</dd>
                            <dt class="productView-info-name">Style:</dt>
                            <dd class="productView-info-value">&lrm;Baby Trend Jogger</dd>
                            <dt class="productView-info-name">Harness type:</dt>
                            <dd class="productView-info-value">&lrm;5 Point</dd>
                            <dt class="productView-info-name">Item Weight:</dt>
                            <dd class="productView-info-value">&lrm;27 pounds</dd>
                            <dt class="productView-info-name">Country/Region of origin:</dt>
                            <dd class="productView-info-value">&lrm;China</dd>
                 </dl>

I have a html code for product specification
Please help me css style same with image

follow with link product : https://www.walmart.com/ip/Baby-Trend-Expedition-Race-Tec-Jogger-Ultra-Black-Black/507899522

Thank for help

[SamA74]

To style like the image shown, using the dl mark up, you could use display table to get the tabular appearance for the list.
To make table rows, you would need to wrap each <dt> and <dd> pair in a <div>, which is now valid mark up for a <dl>.

.productView-info {
     display: table;
}
.productView-info div {
   display: table-row;
}
.productView-info dt, .productView-info dd {
    display: table-cell ;
}

That is the basis for the table style layout. It will need further refinement to get the exact styling.

[SamA74]

Example here:-

[liencemos]

Thank you so much for help
But this code from Bigcommerce Source Core I only have permission to edit the css code

[SamA74]

@liencemos

I only have permission to edit the css code

To get a similar effect without changing the HTML, I think it may be possible with grid, using a two column layout. Though I still have not found the time to fully familiarise myself with grid.
There are other methods, but getting the columns to align may require some magic numbers, so that could be a flawed approach.

[PaulOB]

Just typed this codepen on my phone so excuse the brevity.

It uses css grid as Sam suggests above.

[PaulOB]

Here it is applied to your page plus a few over-rides.

This was the code I injected.

dl.productView-info:before,
dl.productView-info:after,
dl.productView-info dt:after,
dl.productView-info dd:after{display:none;}

dl.productView-info,
.productView-info dt,
.productView-info dd {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
dl.productView-info {
  background: #f9f9f9;
  padding: 10px;
  margin: 10px auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
dl.productView-info dd,
dl.productView-info dt {
  padding: 10px;
  width:auto;
}
dl.productView-info dt {
  font-weight: bold;
}
dl.productView-info dd:nth-child(4n + 2),
dl.productView-info dt:nth-child(4n + 1) {
  background: black;
  color: #fff;
}