Height of cell inside row in HTML table not displayed properly - html

Question

I am trying to create UI as shown in attached image.
There are 2 parts leftside and rightside.
Here, Col1 and Col2 are fixed on leftside. On rightside Col3, Col4 and so on are dynamically added. Below Col3, Col4(rightside) there is scroll bar so that user can scroll and see right most columns info.
Issue that I am facing is due to variable text size inside cell. Due variable text inside each cell, height of cell gets different and in some time it looks like as shown in screenshot. It cuts. I want each cell to be of same height. The cell which have more text, height of that cell should be applied to other cells in row. But that is not happening only for "Col 2".
I think this is due to "position" CSS given to it. I am using below HTML and CSS to achieve this. I tried to solve it by CSS but not able to do it.
Any help/suggestion appreciated.
.table {
border: none;
border-right: solid 1px #e6e6e6;
border-bottom: solid 1px #e6e6e6;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.table thead th {
background-color: #F1F1F1;
border: none;
color: #000000;
padding: 10px 15px;
text-align: center;
min-width: 250px;
max-width: 250px;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
font-size: 14px;
}
.table tbody td {
font-size: 12px;
border-left: solid 1px #e6e6e6;
border-top: solid 1px #e6e6e6;
background-color: #ffffff;
color: #000000;
padding: 10px 15px;
// text-shadow: 1px 1px 1px #fff;
white-space: normal;
min-width: 250px;
max-width: 250px;
}
.table tbody td:nth-child(1) {
background-color: #F1F1F1;
}
.table tbody td span {
float: left;
width: 100%;
word-break: break-all;
}
.wrapper {
position: relative;
background-color: #F1F1F1;
}
.scroller {
margin-left: 500px;
overflow-x: scroll;
}
.table .col1 {
left: 0;
position: absolute;
top: auto;
width: 120px;
height: auto;
background-color: #F3F3F3;
color: #000000;
text-transform: capitalize;
}
.table .col2 {
left: 250px;
position: absolute;
top: auto;
width: 120px;
height: auto;
color: #000000;
}
<div class="wrapper">
<div class="scroller">
<table class="table">
<thead>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th colspan="4"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">
<span>
Item No.
</span>
</td>
<td class="col2">
<span>
NA
</span>
</td>
<td>
<span>
21312312
</span>
</td>
<td>
<span>
21312312
</span>
</td>
<td>
<span>
21312312
</span>
</td>
<td>
<span>
21312312
</span>
</td>
</tr>
<tr>
<td class="col1">
<span>
Item Description
</span>
</td>
<td class="col2">
<span>
ITM-Local-Create ITM-Local-Create ITM-Local-Create ITM-Local-CreateITM-Local-Create ITM-Local-Create ITM-Local-Create
</span>
</td>
<td>
<span>
ITM-Local-Create
</span>
</td>
<td>
<span>
ITM-Local-Create
</span>
</td>
<td>
<span>
ITM-Local-Create
</span>
</td>
<td>
<span>
ITM-Local-Create
</span>
</td>
</tr>
<tr>
<td class="col1">
<span>
Short Description
</span>
</td>
<td class="col2">
<span>
CABLE,ELEC;
</span>
</td>
<td>
<span>
CABLE,ELEC CABLE,ELEC;GL;1;2;3;422LKSDFKLK;LKJX CABLE,ELEC;GL;1;2;3;422LKSDFKLK;LKJX
</span>
</td>
<td>
<span>
CABLE,ELEC
</span>
</td>
<td>
<span>
CABLE,ELEC
</span>
</td>
<td>
<span>
CABLE,ELEC
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>