关于与table并列一行的div在table中的文字内容变长后产生换行的问题

将两个div分别置于table表格的左边和右边，如图所示：

图片说明

代码如下：

<body>
    <div class="left" style="background-color: rebeccapurple;width: 100px;height: 200px; float: left;"></div>
    <table border="1" style="float: left;">
        <tr>

        </tr>
        <tr>
            <th>Month</th>
            <th>
                <p>Savings</p>
            </th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100$100$100$100$100$100$100$100$100$100$100$100$100</td>
        </tr>
    </table>
    <div class="right" style="background-color: rebeccapurple;width: 100px;height: 200px; float: left;"></div>
</body>

当向表格中输入文字，文字长度增加到一定程度后，两个div和表格就不再同一行了，如图所示

图片说明

请问为什么会这样呢，该怎么让他们一直都处于同一行呢？

宽度设死了吗？强制不换行