I have my html code :

```html
<div>
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;">
        <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;">
            <div style="float: left;">ROW X COLUMN</div>
        </div>
        <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;">
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div>
                <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div>
                <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div>
                <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div>
                <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div>
                <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div>
                <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div>
            </div>
            <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;">
                <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div>
                <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div>
                <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div>
                <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div>
            </div>
        </div>
    </div>
</div>
```

I would like to add overflow-y:scroll, so that the column starting from 2 X 0 appears right to the column 1 X 0.

I have tried various css, but unable to figure out how to fix. Please someone help me to figure out.