JSFiddle - React, Tailwind, and code Playground

HTML

<div class="worktop_central">
            <div class="row">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
            </div>
        </div>

CSS

.worktop_central{
    position:relative; 
    margin-bottom: 30px;
}

.worktop_central .row{
  text-align: justify;
  font-size: 0;
  font-size: 12px\9; /* IE6-9 only hack */
}

.worktop_central .row div{
  border:1px solid #bfbfbf;
  display: inline-block;
  font-size: 12px;
  width: 216px;
  zoom: 1;
  *display: inline;
  min-height: 200px;
  margin-top:20px;
  transition: 1s ease-in-out;
}

.worktop_central .row div:hover{
    height: 600px;
}

.worktop_central .row:after{
  content: "";
  width: 100%;
  display: inline-block;

  zoom: 1;
  *display: inline;
}