User:Mathglot/sandbox/Templates/vbar/styles.css

.vbar {
    line-height:9px;              /* inter-lineal for horizontal */
}

.vbar-h {                          /* Horizontal orientation */
    display:inline-block; 
    border:thin solid darkgray; 
    height:5px;                    /* bar thickness */
    color:white; 
    background-color:#CCE4F2;
    font-size:85%; 
    padding:0 0 1px 2px;
}

.vbar-v {                          /* Vertical orientation */
    display:inline-flex; 
    border:thin solid darkgray; 
    width:5px;                     /* bar thickness */
    height:96px;                   /* bar length */
    color:white;
    background-color:#CCE4F2;
    font-size:85%; 
    padding:0 0 1px 2px;
	flex-direction: column;
	justify-content: flex-end;
	vertical-align: bottom;
}

.vbar-labelh {                   /* prefix label: left of horizontal bar */
      display: inline-block;
      width: 6ch;                /* 6 characters width */
      text-align: right;         /* Align the label text right*/
      margin-right: 10px;        /* Space between the label and the following text */
      font-family: monospace;    /* Optional: monospaced font for consistent character width */
      font-size:10px;
      font-weight:300;
      vertical-align: middle;
}

.vbar-labelv {                   /* prefix label: below vertical bar */
      display: inline-block;
      height: 8ch;               /* 8 characters long */
      writing-mode: vertical-rl; /* Rotate -90deg so it reads vertically */
      margin: 0 auto;            /* horizontal alignment centered */
      margin-top: 8px;           /* Space between the label and the following text */
      font-family: monospace;    /* Optional: monospaced font for consistent character width */
      font-size:9px;
      font-weight:bold;
}

.vbar-valh {                    /* bar value: right end of horizontal bar */
      display: inline-block;
      width: 8ch;               /* 8 characters width */
      text-align: left;         /* Align the label text left */
      margin-left: 3px;         /* Space between the end of the bar and the value */
      font-size:9px;
      font-weight:300;
      color:#949494;
      vertical-align: middle;
}

.vbar-valv {                     /* bar value: above vertical bar */
      display: inline-block;
      height: 8ch;               /* 8 characters long */
      writing-mode: vertical-rl; /* Rotate -90deg so it reads vertically above the bar */
      margin: 0 auto;            /* horizontal alignment centered */
      margin-bottom: 8px;        /* Space between the end of the bar and the value */
      font-size:8px;
      font-weight:bold;
}