Here is the layout I have created using react JS. https://i.sstatic.net/UHagO.png
Below is the code snippet used to generate each checkbox:
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>
)
}
This is 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' }}>
Currently using justify-between to align the items horizontally, I am looking for a way to align them vertically instead. Any suggestions on how this can be achieved?