In any js plugin you can not Change the core style/markup!! In your case you add style named: Tab Pane and change the core style " display: none;" (The plugin JS use this property) to "display: flex" Thats it This is enough to break the layout (Now you dont toggle from hidden to block ).
If you want to add flex/grid inside tab-pan-X add div wrapper inside tab-pan than add any style you want
Solution
First - remove this class from the 4 tab panes. Than change the text (in all four tabs you have the same content).