JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flexeWarp">
<div class="flexLeft">
some very long texttexttexttextt
</div>
<div class="flexRight">
<div class="table-responsive boxShadow">
<table class="table tableW longTBL">
<thead>
<tr>
<th>Server</th>
<th>Database name</th>
<th class="hidden-xs">Schema</th>
<th class="hidden-xs">Table name</th>
<th>Index name</th>
<th>Index id</th>
<th>Clustered</th>
<th>Fill factor</th>
<th>Scan density</th>
<th>Logical frag.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pitt</td>
<td>12/3/2016 13:00</td>
<td>Pitt</td>
...
CSS
.flexeWarp{display:flex;}
.flexLeft{flex:2 0 0;background:red;}
.flexRight{flex:4 0 0;}
.table-responsive {
background: #fff none repeat scroll 0 0;
margin: 0 0 1em;
overflow-y: auto;
padding: 0;
width: 100%;
min-height: 0.01%;
overflow-x: auto;
}