JSFiddle - React, Tailwind, and code Playground

HTML

<table class="ms-cui-gallery" id="Ribbon.EditingTools.CPEditTab.Paragraph.ElementWithStyle.Menu.Styles.Gallery" unselectable="on"><tbody unselectable="on"><tr unselectable="on"><td class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom" unselectable="on"><div class="ms-cui-gallerybutton ms-cui-gallerybutton-SizeCustom ms-cui-gallerybutton-highlighted" id="undefined-Menu" unselectable="on" mscui:controltype="GalleryButton"><div tabindex="0" title="Paragraphe" class="ms-cui-gallerybutton-a " role="button" unselectable="on"><div class="ms-rte-stylePreview ms-rte-styleGalleryPreview" unselectable="on">
                            <div class="ms-rte-stylePreviewBox" unselectable="on">
                                <div class="ms-rte-stylePreviewBoxInner" style="color: rgb(53, 53, 53); font-family: Tahoma, Geneva, Verdana, sans-serif; font-size: 0.81em; font-weight: 400; background-color: rgb(255, 255, 255);" unselectable="on">
                                    <div class="ms-rte-stylePreviewHolder" unselectable="on"><span style="white-space: nowrap;" unselectable="on"><p class="ms-rteElement-P" style="margin: 0px !important; line-height: 100% !important; position: static !important;" unselectable="on">AaBbCcDdEeFfGgHhIiJjKkLlMmNn</p></span></div>
                                </div>
                            </div>
                            <div class="ms-rte-stylePreviewTitle ms-cui-ctl-mediumlabel" unselectable="on">Paragraphe</div>
                        </div></div></div></td><td class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom" unselectable="on"><div class="ms-cui-gallerybutton ms-cui-gallerybutton-SizeCustom" id="undefined-Menu" unselectable="on" mscui:controltype="GalleryButton"><div tabindex="0" title="Titre&nbsp;2" class="ms-cui-gallerybutton-a " role="button" unselectable="on"><div class="ms-rte-stylePreview ms-rte-styleGalleryPreview" unselectable="on">
                            <div class="ms-rte-stylePreviewBox"...

CSS

td { border: solid 1px grey;}
table{
border-collapse: collapse;}

JavaScript

$('td').click(function(){ alert($(this).attr('id'));})

function OrderRTETableElement(){
	var subMenuTables = ["Paragraph.ElementWithStyle"];
	for(subMenuTable in subMenuTables){
		var currentTable = $("table[id*='"+ subMenuTables[subMenuTable] +"']");
		var currentTableId = currentTable.attr("id");
	
		tabfullcells=[];	
		cpl=4;

		$("table[id='"+currentTableId+"'] td").each(function(){
			if($(this).has("div").length){
				tabfullcells.push($(this));}
			else {$(this).remove()}
		});
		
		console.log(tabfullcells);
		
		ligne=-1;

		$.each(tabfullcells,function(i,cell){
			ligne=(i % cpl == 0)?ligne+1:ligne;
			$("table[id='"+currentTableId+"'] tr:eq("+(ligne)+")").append(cell);
		});
 
	}
}

//OrderRTETableElement();