JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<div class='row'>
    <div class='cell'>aaaa</div>
    <div class='cell'>bbbb</div>
    <div class='cell'>cccc</div>
</div>
<div class='row'>
    <div class='cell'>dddd</div>
    <div class='cell'>eeee</div>
    <div class='cell'>ffff</div>
</div>

CSS

.cell {
    z-index: 1;
    position: relative;
    float: left;
    width: 82px;
}

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
}

row {
    clear: left;
    position: relative;
    z-index: 1;
}