html - How can I position my content in a grid-like fashion -

html - How can I position my content in a grid-like fashion -

i have bunch of controls web app this

-------------------------------------------------------------------------- banana: | number of slices: [dropdown] | piece thickness: [dropdown] -------------------------------------------------------------------------- cucumber: | number of slices: [dropdown] | piece thickness: [dropdown] --------------------------------------------------------------------------

i place these in grid-like layout , have feeling tables not way (even if perfect situation). i'm having hard time figuring how align columns match in position , length (those pipes (|) not visible, if them aligned (and of course of study in "cells" of different lengths)).

what have here tabular input. each row of table ingredient, , each column indeed column (first label column, column slices, thickness). absolutely should utilize <table> this.

however, i'd suggest little alter in layout:

ingredient | slices | thickness ------------------------------------ banana | [dropdown] | [dropdown] ------------------------------------ cucumber | [dropdown] | [dropdown]

just makes more table-like way ;)

html css grid-layout