JSFiddle - React, Tailwind, and code Playground

by Addy Osmani

HTML

<form id="f_form" action="#">
   
                   <table>
                           <tbody>
                                   <tr>
                                           <th>Customer</th>
                                            <td>
                                                           <input name="show_hide_button" id="show_hide_button" type="button" value="Click me" />
    
                                                            <div id="show_hide_div" style="display: none;">
                                                                   <textarea name="f_area1" rows="10" cols="40"></textarea>
                                                           </div>
                                                                <div>
                                                                    <textarea name="f_area2" rows="10" cols="40"></textarea>
</div>
                                           </td>
                                    </tr>
                           </tbody>
                   </table>
   
            </form>

CSS

table {
                                            width: 400px;
                                        
                                           border: 1px solid black;
                                           border-collapse: collapse;
                                    }
   
                                   th, td {
                                          
                                            border: 1px solid black;
                                   }
    
                                   th {
                                      
                                     width: 120px;
                                     min-width:120px;
                                  }

#show_hide_div { width:0px; }

JavaScript

$("#show_hide_button").click(function() {
                                   $("#show_hide_div").toggle(4000);
                           });