JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div>
Click a  letter, then <button>Wiggle</button> (or resize the page)
</div>
<div id="viewport">
    <div id="host">
        <div id="list">
            <div class="item">
                <div class="color">A</div>
            </div>
            <div class="item">
                <div class="color">B</div>
            </div>
            <div class="item">
                <div class="color">C</div>
            </div>
            <div class="item">
                <div class="color">D</div>
            </div>
            <div class="item">
                <div class="color">E</div>
            </div>
            <div class="item">
                <div class="color">F</div>
            </div>
            <div class="item">
                <div class="color">G</div>
            </div>
            <div class="item">
                <div class="color">H</div>
            </div>
        </div>
    </div>
</div>

CSS

div.item {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  div.item .color {
      width: 40px;
      height: 40px;
      border: 1px solid blue;
  }
  
  #host {
      border: 1px solid red;
      display: block;
      width: 100px;
  }

JavaScript

function expandItem(e) {
    var item = e.target.parentNode;
    if (item.className != 'item')
        throw new Error('click the item');
    var listClientRect = document.querySelector('#list').getBoundingClientRect();

    item.style.position = 'fixed';
    item.style.top = 0 + 'px';
    item.style.height = '50px';
    item.style.backgroundColor = 'white';

    item.style.top = listClientRect.top + 'px';
    item.style.height = '100%';
}

// Set up test
for (var item of Array.prototype.slice.call(document.querySelectorAll('.item')))
    item.addEventListener('click', expandItem);

// Or force a layout by resizing the page
document.querySelector('button').addEventListener('click', function() {
    document.querySelector('#list').style.display = '';
    setTimeout(function() {
        document.querySelector('#list').style.display = 'inline-block';
        setTimeout(function() {
            document.querySelector('#list').style.display = 'block';
        }, 100);
    }, 200);
});