How to create expandable collection with cells? - html

Question

I'm working on a php application, attempting to dynamically select from a MySQL database and populate a page with configurable cells based on table rows that users can use to manage their configuration. I'm trying to make every cell look roughly like this:
However, I'm not quite sure how to get there. My first thought was to use a separate div for each element of the cell:
.stockcellcontainertext {
position: absolute;
vertical-align: middle;
text-align: center;
left: 0;
width: 15%;
height: 100%;
margin: auto;
}
.stockcellcontainercheckbox {
display: inline-block;
position: absolute;
vertical-align: middle;
right: 0;
width: 75%;
height: 100%;
margin: auto;
}
And then I tried a more basic approach with <table>
<form action="update_client.php" method="get">
<table style="width: 100%;">
<tr>
Symbol: <br>
<input type="text" name="symbol000" value="GOOG">
</tr>
<tr>
<input type="checkbox" name="input0" value="Hull's Moving Average" checked>
<label for="input0">input0</label>
<input type="checkbox" name="input1" value="Moving Average 200-Days" checked>
<label for="input1">input1</label>
<input type="checkbox" name="input2" value="Moving Average 50-Days" checked>
<label for="input2">input3</label>
</tr>
</table>
</form>
But both of them seem to push the checkboxes down a rank, I can't seem to get them in side-by-side.
Output

Answer 1

Approach with table
<table> with rows in each <td>
Example
<form action="">
<table>
<tr>
<td>
<label for="">Label</label><br>
<input type="text">
</td>
<td>
<div><input type="checkbox"><label for="">Input 1</label></div>
<div><input type="checkbox"><label for="">Input 2</label></div>
<div><input type="checkbox"><label for="">Input 3</label></div>
</td>
<td>
<div><input type="checkbox"><label for="">Input 4</label></div>
<div><input type="checkbox"><label for="">Input 5</label></div>
<div><input type="checkbox"><label for="">Input 6</label></div>
</td>
<td>
<div><input type="checkbox"><label for="">Input 7</label></div>
<div><input type="checkbox"><label for="">Input 8</label></div>
<div><input type="checkbox"><label for="">Input 9</label></div>
</td>
<td>
<input type="submit">
</td>
</tr>
</table>
</form>
Approach with flexbox
The row is display: flex and the columns have flex: 1. The checkboxes are wrapped in <li> (could also be <div>).
Example
.my-form {
border: 5px solid blue;
width: 700px;
}
.my-form>.row {
display: flex;
align-items: center;
}
.my-form .col {
flex: 1;
padding: 15px;
}
.my-form label {
display: inline-block;
margin-bottom: 10px;
}
.my-form input {
padding: 10px;
border: 2px solid #000;
}
.my-form input[type="submit"] {
width: 100%;
border-radius: 20px;
}
.my-form input+label {
margin-left: 10px;
}
.my-form ul {
list-style: none;
padding: 0;
}
<form class="my-form" action="">
<div class="row">
<div class="col">
<label>Text Value:</label><br>
<input type="text" placeholder="Textinput1">
</div>
<div class="col">
<ul>
<li><input type="checkbox"><label for="">input1</label></li>
<li><input type="checkbox"><label for="">input2</label></li>
<li><input type="checkbox"><label for="">input3</label></li>
</ul>
</div>
<div class="col">
<ul>
<li><input type="checkbox"><label for="">input4</label></li>
<li><input type="checkbox"><label for="">input5</label></li>
<li><input type="checkbox"><label for="">input6</label></li>
</ul>
</div>
<div class="col">
<ul>
<li><input type="checkbox"><label for="">input7</label></li>
<li><input type="checkbox"><label for="">input8</label></li>
<li><input type="checkbox"><label for="">input9</label></li>
</ul>
</div>
<div class="col">
<input type="submit">
</div>
</div>
</form>
Hints
how-can-i-add-padding-to-input-type-button
how-to-style-input-and-submit-button-with-css
css-webkit-appearance-none-is-causing-checkbox-to-not-be-checked