How to maintain two tables side by side horizontally?

Question

I have two tables on a HTML page aligned horizontally, one on the left and the other on the right and they look fine when the browser is maximized but they lose their horizontal alignment when the size of the window is reduced. I used the following CSS for both the tables.

Table 1

.viewTable {   
    background-color: #eeeff4 !important;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: 79% ;
    margin-left:0;
    float: left;
    clear:both;
}

Table 2

.settleViewTable {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    width: auto;
    margin-right:10px;
    margin-left:10px;
    float: right;
}

May I know a better way to achieve this without losing the alignment when window size is reduced?

Answer 1

You have table 1 set to width:79% and table 2 has both left + right margin of 10px together 20px, so that the width of table 2 would be width:calc(21% - 20px); That will make sure the two tables stay side by side with floating.

Learn more about CSS calc() - https://developer.mozilla.org/en-US/docs/Web/CSS/calc