JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div>
    <table>
        <tr id="infoRow">
            <td id="dataContainer">
                <div id="wrapper">
                <p>Pnghom</p>
                <input type="text" class="phoneInput"></input>
                <input type="text" class="phoneInput"></input>
                <input type="text" class="phoneInput"></input>
                <button id="expandButton" onclick="expandRow()">Expand</button>
                </div>
            </td>
        </tr>
        <tr>
            <td><button id="growBtn" onclick="expandRow()">DF</button>
            </td>
        </tr>
    </table>
</div>

CSS

#infoRow {
    background-color:rgb(100, 100, 100);
}
.phoneInput {
    width:30px;
}
#wrapper
{
    height:0;
    display:none;
    
}

JavaScript

$(document).ready(function(){
    
  
});


function expandRow() {
   
    $("#wrapper").css("display", "block");
    $("#wrapper").animate({"height":300}, 'fast');
 
}