JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<div class="1234">    
    <table>
    <tbody>
    <tr>
        <th>Name
        </th>
        <th>Age
        </th>
    </tr>
</tbody>
    </table>
    <div class="bbcd"></div>
    <div class="abcd"></div>
</div>


<table class="left-column">
    <tbody>
    <tr>
        <td>Joe
        </td>
        <td>28
        </td>
    </tr>
</tbody>
    </table>
        
 
     <fieldset class="right-column">
      
            <legend>  <span>Personalia:</span></legend>
        <table class="right-columns">
            
	

<tbody>
    <tr>
        <td>Andy
        </td>
        <td>30
        </td>
    </tr>
</tbody>
</table>
         </fieldset>

CSS

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
} 
legend {
    margin-left:90%;
}
span{
    /*float:right;*/
}
.left-column,.right-columns{
    width:100%;  
}
.right-columns{
    width:85%;  
}

JavaScript

//$('div.1234').html('<table border=1><tr><td id="cell1"></td><td id="cell2"></td></tr></table>');
$('#bbcd').html($('.left-column').clone());
$('#abcd').html($('.right-column').clone());