<main class="max-w-6xl mx-auto my-8 pb-4 pl-4 border-l-8 border-l-teal-600">
  <h2 class="text-xl font-medium text-amber-800">CSS PROPERTIES</h2>
  <h1 class="mb-1 text-4xl font-light text-teal-800">inline/block size</h1>
  <p class="font-medium">The CSS properties <code>inline-size</code> and <code>inline-size</code> are very similar to <code>width</code> and <code>height</code> properties. But their meaning changes when the <code>writing-mode</code> changes from horizontal to vertical! You can experiment with with these sizes by changing the sizes and toggling between a horizontal and vertical writing mode.
    (Read more on MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size" target="mdn" class="text-teal-400 hover:text-teal-600">inline-size</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/block-size" target="mdn" class="text-teal-400 hover:text-teal-600">block-size</a>)
  </p>
  
  <p class="my-4 flex flex-col md:flex-row gap-8">
    <span class="field inline-flex gap-2">
      <label for="inline">inline-size:</label>
      <code id="inlineValue" data-prop="inlineSize"></code>
      <input type="range" id="inline" name="inline" min="0" max="1000" step="50" value='0' class="w-40" />
    </span>
    <span class="field inline-flex gap-2">
      <label for="block">block-size:</label>
      <code id="blockValue" data-prop="blockSize"></code>
      <input type="range" id="block" name="block" min="0" max="1000" step="50" value='0' class="w-40" />
    </span>
  </p>
  
  <div class="flex gap-4 my-4">
    <div>
      <div class="writing-mode">
        <button class="opt block my-2 py-1 px-2
         border-2 border-amber-400 rounded 
         text-amber-400 hover:text-amber-600"
         data-val="horizontal-tb" data-text="mixed">horizontal-tb</button>

        <button class="opt block my-2 py-1 px-2
         border-2 border-amber-400 rounded 
         text-amber-400 hover:text-amber-600"
         data-val="vertical-rl">vertical-rl</button>

        <button class="opt block my-2 py-1 px-2
         border-2 border-amber-400 rounded 
         text-amber-400 hover:text-amber-600"
         data-val="vertical-lr">vertical-lr</button>

    </div>
      <div class="direction">
        <button class="opt block my-2 py-1 px-2
         border-2 border-teal-400 rounded 
         text-teal-400 hover:text-teal-600"
         data-val="ltr">ltr</button>
        
        <button class="opt block my-2 py-1 px-2
         border-2 border-teal-400 rounded 
         text-teal-400 hover:text-teal-600"
         data-val="rtl">rtl</button>
      </div>
    </div>
    <div id="text" class="p-2 border-2 border-slate-200 rounded bg-slate-100">
      <p class="my-1">
        <strong>Line 1</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat deserunt velit officia illo et veniam quaerat magni voluptatibus reprehenderit aliquid sapiente error quo enim temporibus voluptas eaque quia, consequatur voluptatum?
      </p>
      <p class="my-1">
        <strong>Line 2</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore incidunt, id tempora dolorem corrupti, consequatur tenetur reprehenderit omnis, vel architecto ab cumque expedita illo eos! Veniam, consequatur totam! Hic, sed.
      </p>
      <p class="my-1">
        <strong>Line 3</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus odit consectetur debitis, impedit omnis fugit? Debitis, voluptatem omnis praesentium aut odio adipisci voluptatum consectetur magnam fuga quas ex nam hic.
      </p>
    </div>
  </div>
</main>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
html, body {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}
.opt.active {
  background-color: rgba(0,0,0, 0.1);
}

const target = document.getElementById('text');

// --- SIZE INPUTS --- //
const inlineInput = document.getElementById('inline');
const inlineValue = document.getElementById('inlineValue');
const blockInput = document.getElementById('block');
const blockValue = document.getElementById('blockValue');

inlineInput.addEventListener('change', (e) => {
  setValue(inlineValue, e.target.value);
});
blockInput.addEventListener('change', (e) => {
  setValue(blockValue, e.target.value);
});

//Initialize
setValue(inlineValue, inlineInput.value);
setValue(blockValue, blockInput.value);

function setValue(which, value) {
  value = (!value || value === '' || value === '0') ? 'auto' : `${value}px`;
  target.style[which.dataset['prop']] = value;
  which.innerText = value;
}

// --- WRITING-MODE BUTTONS --- //

const modeBtns = document.querySelectorAll('.writing-mode .opt');
const dirBtns = document.querySelectorAll('.direction .opt');


modeBtns.forEach(b => {
  b.addEventListener('click', _ => {
    target.style.writingMode = b.dataset['val'];
    activateBtn(b, modeBtns);
  })
});


dirBtns.forEach(b => {
  b.addEventListener('click', _ => {
    target.style.direction = b.dataset['val'];
    activateBtn(b, dirBtns);
  })
});

// initialize writing mode
target.style.writingMode = modeBtns[0].dataset['val'];
activateBtn(modeBtns[0], modeBtns);

// initialize direction
target.style.direction = dirBtns[0].dataset['val'];
activateBtn(dirBtns[0], dirBtns);



function activateBtn(button, group) {
  group.forEach(b => b.classList.toggle('active', b === button));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com