JSFiddle - React, Tailwind, and code Playground
HTML
<dl class="tel">
<dt>Tel.<span class="type">work</span></dt>
<dd><span class="value">01 02 03 04 05</span></dd>
<dt>Port.<span class="type">cell</span></dt>
<dd><span class="value">06 07 08 09 10</span></dd>
<dt>Fax<span class="type">fax</span></dt>
<dd><span class="value">11 12 13 14 15</span></dd>
</dl>
CSS
/* base */
.tel {
display: grid;
grid-template-columns: repeat(2, auto);
}
/* style */
.tel {
border: 1px solid;
width: max-content;
margin: auto;
}
.tel .type {
display: none;
}
.tel :is(dl, dt, dd) {
padding: 0.15em;
margin: 0
}
dt {
text-decoration: underline;
background: lightgray;
}
.tel> :nth-child(4n) {
background: #bee
}