JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<dl class="inlineData">
  <dt>VALEUR bla</dt>
  <dd>DONNÉE</dd>
  <dt>VALEUR</dt>
  <dd>DONNÉE</dd>
</dl>

<dl class="inlineData--capitalize">
  <dt>VALEUR bla</dt>
  <dd>DONNÉE</dd>
  <dt>VALEUR</dt>
  <dd>DONNÉE</dd>
</dl>

SCSS

*, ::after, ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

dl, dd {
  padding: 0;
  margin: 0;
}

.inlineData-label,
.inlineData dt {
  display: inline;
  font-weight: normal;
  
  &::before {
    content: '';
    display: block;
  }

}

.inlineData-value,
.inlineData dd {
  display: inline;
}

.inlineData--capitalize dt {
  display: inline-block;
  width: 100%;
  max-width: max-content;
  text-transform: lowercase;
  
  &::first-letter {
    text-transform: uppercase;
  }
  
  &::before {
    content: unset;
  }
}

.inlineData--capitalize dd {
  display: inline;
  text-transform: lowercase;
   
   &::after {
    content: '';
    display: block;
  }
}