JSFiddle - React, Tailwind, and code Playground

HTML

<button id = "buttonYo">Button</button>
<table id = "table">
    <tr id = "drillDownRow">
        <td><strong>1</strong></td>
        <td>Fonction</td>
        <td>Client</td>
        <td>123ms</td>
        <td>123555</td>
    </tr>
</table>

CSS

.deployable {
	background-color: red;
	height: 10px;
	
	-webkit-transition: height 0.1s ease-in-out;
    -moz-transition: height 0.1s ease-in-out;   
    -ms-transition: height 0.1s ease-in-out;
    -o-transition: height 0.1s ease-in-out;
    transition: height 0.1s ease-in-out;
}

td {
    width: 100px;
    border: 1px solid #000;    
}

JavaScript

function createDeployFunction() {
    return function() {
        
        // Loading row
        var loadingRow = document.createElement('tr');
        loadingRow.id = "loadingRow";
        loadingRow.className = "deployable";
        
        // Loading cell inside the row
        var loadingCell = document.createElement('td');
        loadingCell.colSpan = 5;
        
        // Add cell to row and then row to table
        loadingRow.appendChild(loadingCell);
        document.getElementById("table").appendChild(loadingRow);
        
        // Set a new height to the row, hoping that the god damn transition will work
        loadingRow.style.height = "400px";
    }
}

var button = document.getElementById("buttonYo");
button.addEventListener('click', createDeployFunction(), false);