I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below:
https://i.stack.imgur.com/QoVrg.png
One issue I'm facing is getting the letters A, B, C, D (which correspond to each row) to align at the same height as my checkboxes. Despite adjusting margins and padding between the letters, I haven't seen any visible changes. Any assistance would be greatly appreciated.
Here's a snippet of my code:
.checkboxes-container{
position: absolute;
width:620px;
height:240px;
left:25%;
top:42%;
display:flex;
justify-content: flex-start;
}
.checkbox-container{
background-color:teal;
width:230px;
height:100%;
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
}
.checkbox-container div{
flex-basis:100%;
}
.business-bx{
margin-top:17px;
transform:scale(1.5);
}
.business-bx:not(:first-child){
margin-left:38px;
}
.business-bx:first-child{
margin-left:10px;
}
.table tbody tr td:first-child {
font-weight:bold;
}
.table {
border-spacing: 3em;
}
.letter{
font-size:20px;
padding:0;
}<div class="table-container">
<table class="table">
<thead>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr class="letter">
<td>A</td>
</tr>
<tr class="letter">
<td>B</td>
</tr>
<tr class="letter">
<td>C</td>
</tr>
<tr class="letter">
<td>D</td>
</tr>
</tbody>
</table>
</div>
<div class="checkboxes-container">
<div class="checkbox-container business-boxes">
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
<div>
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
<input type="checkbox" class="business-bx">
</div>
</div>
</div>