JSFiddle - React, Tailwind, and code Playground

by duarteleao

HTML

<!-- 
  Using grid layout for a "labels and values" use case.
  
  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
-->

<div class="pentaho-dialog">
  <div class="dialog-content">
    <div class="pull-left boldLabel responsiveLabel" style="width:100px;">Display Name:</div>
    <div class="pull-left responsiveValue" style="width:370px;">Country</div>
    <div class="line-break">&nbsp;</div>

    <div class="pull-left boldLabel responsiveLabel" style="width:100px;">Type:</div>
    <div class="pull-left responsiveValue" style="width:370px;">Level (Names, Categories, etc.)</div>
    <div class="line-break">&nbsp;</div>

    <div class="pull-left boldLabel responsiveLabel" style="width:100px;">Description:</div>
    <div class="pull-left responsiveValue" style="width:370px;">The customer</div>
    <div class="line-break">&nbsp;</div>

    <div class="pull-left boldLabel responsiveLabel" style="width:100px;">MDX:</div>
    <div class="pull-left responsiveValue" style="width:370px;">[Markets].[Country]</div>
    <div class="line-break">&nbsp;</div>
  </div>
</div>

CSS

/* Base Styles */
.linebreak {
  width: 100%;
  clear: both;
}

.pull-left {
  float: left;
}

.boldLabel {
  font-weight: bold;
  padding-right: 5px;
}

/* Overriding Styles */
.responsiveLabel {
  width: auto !important;
  float: none;
}

.responsiveValue {
  width: auto !important;
  float: none;
}

.pentaho-dialog .dialog-content {
  display: grid;
  /*
     Columns:
     1. width of content, but at least 100px
     2. shrink or expand; take up 1 fr[action] of remaining space.
     3. hidden; this is the lineBreak column
   */
  grid-template-columns: minmax(100px, auto) 1fr 0;
  
  /*
     Vertical gap of 1 text line (1 em) to mimic old behavior achieved
     by the empty lineBreak div.
     
     Horizontal gap is already achived by base rule applied to .boldLabel.
  */
  gap: 1em 0;
}