JSFiddle - React, Tailwind, and code Playground
HTML
<div id="mainContainer">
<div id="leftContainer">
<table style="width: 200px;">
<tr>
<td>Date</td>
<td>New Users</td>
</tr>
<tr>
<td>April 3</td>
<td>48</td>
</tr>
<tr>
<td>April 4</td>
<td>41</td>
</tr>
<tr>
<td>April 5</td>
<td>61</td>
</tr>
<tr>
<td>April 6</td>
<td>81</td>
</tr>
<tr>
<td>April 7</td>
<td>11</td>
</tr>
</table>
</div>
<div id="rightContainer">
<table style="width: 200px;">
<tr>
<td>Day 1</td>
<td>Day 2</td>
<td>Day 3</td>
<td>Day 4</td>
<td>Day 5</td>
<td>Day 6</td>
<td>Day 7</td>
<td>Day 8</td>
<td>Day 9</td>
<td>Day 10</td>
<td>Day 11</td>
<td>Day 12</td>
<td>Day 13</td>
<td>Day 14</td>
<td>Day 15</td>
<td>Day 16</td>
<td>Day 17</td>
<td>Day 18</td>
<td>Day 19</td>
<td>Day 20</td>
<td>Day 21</td>
<td>Day 22</td>
<td>Day 23</td>
<td>Day 24</td>
<td>Day 25</td>
<td>Day 26</td>
<td>Day 27</td>
<td>Day 28</td>
<td>Day 29</td>
<td>Day 30</td>
</tr>
<tr>
<td>30 %</td>
<td>29 %</td>
<td>28 %</td>
<td>27 %</td>
<td>26 %</td>
<td>25 %</td>
<td>24 %</td>
<td>23 %</td>
<td>22 %</td>
<td>21 %</td>
<td>20 %</td>
<td>19 %</td>
<td>18 %</td>
<td>17 %</td>
<td>16 %</td>
<td>15 %</td>
<td>14 %</td>
<td>13 %</td>
<td>12 %</td>
<td>11 %</td>
<td>10...
CSS
table,th,td
{
border:1px solid black;
border-collapse:collapse;
table-layout:fixed;
}
td{
width: 75px;
padding: 0px 20px;
height: 30px;
}
#mainContainer{
width: 100%;
}
#leftContainer{
width: 228px;
display: inline-block;
}
#rightContainer{
width: 300px;
display: inline-block;
overflow: auto;
}