JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

        <div class="dietary-calculator dc-container dc-multiple-tabs">
            <div class="table-wrapper data-table-1">
                <h1>
                  Original Table
                </h1>
                <table id="dataTable-1" class="display data-table printable my-meals" width="100%">
                    <thead>
                    <tr>
                        <th><div class='dc-checkbox dc-radius select-all'></div></th>
                        <th><p class="column-title">Meal Title</p></th>
                        <th>Amount<br> (g)</th>
                        <th>Energy<br> kcal</th>
                        <th>Fenil.<br> (g)</th>
                        <th>Carbs<br> (g)</th>
                        <th>Prot.<br> (g)</th>
                        <th>Fat<br> (g)</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr class="table-item">
                            <td></td>
                            <td>
                                <p class="column-title">LPP - Makaronai</p>
                            </td>
                            <td>200</td>
                            <td>359</td>
                            <td>21</td>
                            <td>80</td>
                            <td>222</td>
                            <td>3</td>
                        </tr>
                        <tr class="table-item">
                            <td></td>
                            <td>
                                <p class="column-title">LPP - Paštetas</p>
                            </td>
                            <td>200</td>
                            <td>359</td>
                            <td>21</td>
                            <td>80</td>
                            <td>125</td>
                            <td>3</td>
                        </tr>
                        <tr...

CSS

.flex {
  display: flex;
  justify-content: center;
}
.column {
  flex-direction: column;
  border: 1px solid black;
}
div {
  text-align: center;
}
.value:not(last-child) {
  margin-right: 10px;
}
.values {
  flex-wrap: wrap;
}

JavaScript

jQuery(document).ready( function () {
    // printable datatables
    if(jQuery('.data-table.printable') != 'undefined'){
        let dataTables = jQuery('.data-table.printable');

        dataTables.each(function(index){
            index++;

            jQuery('#dataTable-' + index).DataTable();
        });
    }
} );