Aligning checkboxes with description text in HTML and CSS

Question

I have the following layout tusing react JS.

this the code I'm using to generate each one of these checkboxes

const CheckBoxItem = ({ Label, item, paramField, change }) => {
    return (
        <div className="Search-Input-CheckBox-Item"   >
            <input type="checkbox" checked={item} onChange={

                () => {

                    change()
                }} />

            <p className="Search-Input-Check-Label">{Label}</p>
        </div>
    )

}

the parent div of the items

 <div style={{ paddingLeft: '1%', paddingRight: '1%', borderBottom: '1px solid rgba(255,255,255,.6' }}>
                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>

I'm using justify-between to distribute the items horizontally, However I would each one of them to be vertically aligned. Can anyone give me some hint on how to do that?

proberly the easiest way would be CSS-Grid

tacoshy
– tacoshy

2021-08-18 14:18:01 +00:00
Commented Aug 18, 2021 at 14:18 — tacoshy
– tacoshy, Commented Aug 18, 2021 at 14:18

Dharman · Accepted Answer · 2021-08-18 14:30:35Z

1

I would use grid instead of flex, your second div could then look something like this

<div style={{ display: 'grid', gridAutoFlow: 'row', gridTemplateColums: "repeat(5, minmax(0, 1fr))", gap: "1rem" }}>

edited Aug 18, 2021 at 14:30

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 18, 2021 at 14:25

Benni

6643 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Aligning checkboxes with description text in HTML and CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related