JSFiddle - React, Tailwind, and code Playground

HTML

<button id='b1'>1</button>
<button id='b2'>2</button>
<button id='b3'>3</button>


<div id='table1_style'class='ui_table'>
	<div id='row0_style' class='ui_row'>
		<div class='ui_cell_wrapper '>
			<img class='i'>
		</div>
		<div class='ui_cell_wrapper '>
			<img class='i'>
		</div>
	</div>

	<div id='row1_style' class='ui_row'>
        
		<div class='ui_cell_wrapper'>
            <div class='w2'>
			<img id='' class='i img2' >
            </div>
		</div>
		<div class='ui_cell_wrapper w2'>
            <div class='w2'>
			<img id='' class='i img2'>
            </div>        
		</div>
        
	</div>                    
			
	<div id='row2_style' class='ui_row'>
		<div class='ui_cell_wrapper '>
			<img id='' class='i' src="">
		</div>
		<div class='ui_cell_wrapper '>
			<img id='' class='i'>
		</div>
	</div>           
</div>

CSS

.ui_table{
	width:100%;	
	display: table;	
}

.ui_row{
	width:100%;	
	display: table-row;
	border-spacing: 0px;
}

.ui_cell_wrapper{
	border:solid black 1px;
	position:relative;
	display: table-cell;
	width: 16%;
	vertical-align: middle;
	text-align: center;
}

JavaScript

$('.i').attr('src', "http://qrcode.kaywa.com/img.php");

$('#b1').click(function(){
    $('.img2').add($('.w2')).show(); 
    $('#row1_style').toggle(1000);
});

$('#b2').click(function(){
    $('#row1_style').add($('.w2')).show();    
    $('.img2').toggle(1000);
});

$('#b3').click(function(){
    $('#row1_style').add($('.img2')).show();  
    $('.w2').slideToggle(1000);
});