JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="stacked1" class="date stacked">
  <span class="month">month</span>
  <span class="day">day</span>
  <span class="year">year</span>
</div>

<div id="stacked2" class="date stacked">
  <span class="month">month</span>
  <span class="day">day</span>
  <span class="year">year</span>
</div>

<div id="stacked3" class="date stacked">
  <span class="day">day</span>
  <span class="month">month</span>
</div>

<div id="linear1" class="date">
  <span class="month">month</span>
  <span class="day">day</span>
  <span class="year">year</span>
</div>

<div id="linear2" class="date">
  <span class="month">month</span>
  <span class="day">day</span>
  <span class="year">year</span>
</div>

SCSS

.date {
  display: flex;
  margin: 10px;
  
  .month {
    order: 1;
    padding: 0 4px;
  }
  .day  {
    order: 2;
    padding: 0 4px;
  }
  .year {
    order: 3;
    padding: 0 4px;
  }
  
  &.stacked {
    flex-direction: column;
    text-align: center;
  }
  
  &[data-format="ydm"] {
    .month {
      order: 3;
    }
    .year {
      order: 1;
    }
  }
  &[data-format="dm"] {
    .month {
      order: 2;
    }
    .day {
      font-weight: bold;
      order: 1;
    }
  }
}

JavaScript

let stacked1 = document.querySelector('#stacked1');
let stacked2 = document.querySelector('#stacked2');
let linear1 = document.querySelector('#linear1');
let linear2 = document.querySelector('#linear2');

stacked2.dataset.format = 'ydm';
stacked3.dataset.format = 'dm';

linear2.dataset.format = 'ydm';