JSFiddle - React, Tailwind, and code Playground
HTML
<div class="test">
<table class="matrix">
<tr>
<th>bbbbbbb</th>
<th>aaaaaaa</th>
</tr>
<tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
<input type="radio" name="test" value="1"/>
</td>
<td>
<input type="radio" name="test" value="2" />
</td>
</tr> <tr>
<td>
...
CSS
.test
{
background-color:gray;
display: inline-block;
float: left;
max-height: 200px;
}
.matrix td, .matrix th
{
border:0.1em solid #E2E2E2;
padding:4px 2px;
min-width:65px;
white-space:normal;
text-align:center;
overflow-y:scroll;
}