JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="expand_all">Expand All</a>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
						<tbody><tr>
                            <th></th>
							<th>head 1 </th>
							<th>head 3</th>
							<th>head 3</th>
						</tr>
						<tr>
							<td> <a href="#" class="tr_expand">More</a></td>						
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente eni</span></td>
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente eni</span></td>
							<td class="grid_moretext"><span>Lorem ipsum dolor sit amet. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae tempora nemo autem ex beatae vel assumenda facere aliquam dicta aspernatur sapiente enim nostrum dolore placeat sint voluptates alias fugiat porro.Lorem ipsum dolor sit...

CSS

body{font-size:13px; font-familiy:"Lucida Sans Unicode", "Lucida Grande", sans-serif}
th{
    background:#D28637; padding:5px; border:solid 1px #FFD7AD
}
td{
    background:#FFD7AD; padding:5px; border:solid 1px #D28637
}
a{
    font-size: 16px;
    display: block;
    text-align: center;
    color: #333;
    font-weight: bold;
    text-decoration: underline;
    margin: 10px;
}

JavaScript

var minimized_elements = $('.grid_moretext span');

	minimized_elements.each(function(){    
	var t = $(this).text();        
	if(t.length < 55) return;

	$(this).html(
	t.slice(0,55)+'<span>... </span>'+
	'<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
	);
	}); 
	$('a.tr_expand').click(function(event){
		event.preventDefault();
		$(this).parent().siblings().find("span.more_text").toggle();       
				if ($(".tr_expand").text() == "More") {
					$(".tr_expand").text("Less");
				}
				else {
					$(".tr_expand").text("More");
				}
	});
	$('a.more', minimized_elements).click(function(event){
		event.preventDefault();
		$(this).hide().prev().hide();
		$(this).next().show();        
	});
	$('a.less', minimized_elements).click(function(event){
	event.preventDefault();
	$(this).parent().hide().prev().show().prev().show();    
	});

	$('a.expand_all').click(function(event){
	event.preventDefault();
	$(this).next().find(".grid_moretext span.more_text").toggle();    
	});