JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js"></script>
<button data-hook="show-pane" type="button">Show Pane</button>
<button data-hook="hide-pane" type="button">Hide Pane</button>
<div id="table">
    <div id="row">
        <div id="cell_table">
            <table width="100%" id="myTable" class="display responsive no-wrap">
<!--                width="100%"
why does it only work when adding this attr
-->
                
            </table>
        </div>
        <div id="cell_pane">
            PANE IS HERE!
        </div>
    </div>
</div>

CSS

#table { 
  
}
#row {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    width: 100px;
    /* setting width: some-value, yeilds same effect */
}

#cell_table {
    background: pink;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 400px;
}

#cell_pane {
    background: green;
    width: 400px;
}

JavaScript

var colDefs = [
    {title: 'suuuuuuuuuuuuuper_long_title_1', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_2', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_3', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_4', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_5', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_6', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_7', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_8', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_9', data: 'a'},
    {title: 'suuuuuuuuuuuuuper_long_title_10', data: 'a'}
];
var dummyData = [
    {a: 'bananas'},
    {a: 'oranges'},
    {a: 'pineapps'},
    {a: 'cereal'},
    {a: 'salad'}
];

// GO GO GADGET TABLE
$(document).ready(function(){
    var $myDt = jQuery('#myTable');
    var dtOptions = {
        data: dummyData,
        columns: colDefs,
        responsive: true
    };
    window.$dtApi = $myDt.DataTable(dtOptions);

    var $showPaneBtn = jQuery('[data-hook="show-pane"]').on('click', function() {
        jQuery('#cell_pane').show();
    });

    var $hidePane = jQuery('[data-hook="hide-pane"]').on('click', function() {
        jQuery('#cell_pane').hide();
    });

});