Suppose I am working with the following HTML structure
<div class="option">
<input type="checkbox" />
<label>Checkbox</label>
</div>
<div class="option">
<input type="checkbox" />
<label>Checkbox with longer text</label>
</div>
<div class="option">
<input type="checkbox" />
<label>Cbox</label>
</div>
etc...
I want to arrange these divs in a grid format like a table. It should be responsive, and each column should have equal width.
For instance, if the parent element is 1000px wide and the widest div is 300px, I would like to display 3 columns of 300px each. If the parent is 600px wide and the widest div is 300px, then I would like 2 columns of 300px width each. This resizing should adapt as needed.
Note that the width of these divs may vary depending on content retrieved from a database.
I am aware of frameworks that can handle this task, but for this specific requirement, I prefer not to use an extensive framework.
How would you solve this challenge?