JSFiddle - React, Tailwind, and code Playground

HTML

<!-- I used 300 px instead of 1024 for this example-->
Example 1
<div id="main1">
    Small content, this should not expand more than 400px
    <table width="200" border="1">
        <tr>
            <td>col1</td>
            <td>col2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
    </table>
</div>
<br/>
Example 2
<div id="main2">
    Large content, this should expand more than 400px
    <table width="600" border="1">
        <tr>
            <td>col1</td>
            <td>col2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
    </table>
</div>

CSS

#main1,
#main2 {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #f00;
}